← ARTSABERS

ARTSABERS — Article Mockup 1 · Announcement ·

MAS64 Approved Article ARTSABERS
Open in New Tab ✓ Accepted
Template type: Gutenberg Content — ready for /wire-template.

Mockup HTML

Open in New Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Delay Update: Production & Fulfilment Status — ARTSABERS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
  /* Ember ombre (chromatic — accents only) */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --ember-fixed: #2A0800;

  /* Hull ladder (chromatic — dark greys) */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome highlights (chromatic — whites) */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Surface semantics (role names — for backgrounds + text) */
  --bg-page: var(--carbon);
  --bg-hero: var(--carbon);
  --bg-body: var(--carbon);
  --bg-card: var(--hull-panel);
  --bg-card-lift: var(--hull-panel-lift);
  --bg-nav: var(--carbon);
  --bg-footer: var(--carbon);
  --bg-chip: rgba(255, 122, 46, 0.08);
  --bg-avatar: var(--hull-panel-lift);

  --text-heading: var(--chrome-highlight);
  --text-body: var(--chrome-warm);
  --text-meta: var(--chrome-dim);
  --text-on-ember: var(--ember-fixed);

  --border-panel-top: rgba(250, 250, 250, 0.30);
  --border-hairline: rgba(255, 122, 46, 0.70);
  --border-ghost: rgba(184, 176, 166, 0.15);

  /* Type */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;

  /* Shadow tokens */
  --panel-lift: inset 0 1px 0 rgba(250, 250, 250, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.9);
  --ember-glow-sm: 0 0 16px rgba(255, 122, 46, 0.35);
  --ember-seam-glow: 0 0 24px rgba(255, 122, 46, 0.40);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* -------------------- SITE NAV -------------------- */
.site-nav {
  background: var(--bg-nav);
  border-bottom: 1px solid rgba(250, 250, 250, 0.04);
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.06);
  position: relative;
  z-index: 10;
}
.site-nav__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.site-nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.site-nav__brand-mark {
  color: var(--ember);
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.site-nav__link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav__link:hover {
  color: var(--chrome-highlight);
  border-bottom-color: var(--ember);
}
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.site-nav__action-cart {
  color: var(--chrome-highlight);
}
.site-nav__action-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--ember);
  color: var(--ember-fixed);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* -------------------- ARTICLE HERO (compact ~360px) -------------------- */
.article-hero {
  background: var(--bg-hero);
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 122, 46, 0.50);
  box-shadow: 0 8px 32px -8px rgba(255, 122, 46, 0.30);
}
.article-hero::before {
  /* Panel-joint hairline pattern — subtle horizontal seams */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent calc(28% - 1px), rgba(250, 250, 250, 0.05) 28%, transparent calc(28% + 1px)),
    linear-gradient(180deg, transparent 0%, transparent calc(62% - 1px), rgba(250, 250, 250, 0.04) 62%, transparent calc(62% + 1px)),
    linear-gradient(180deg, transparent 0%, transparent calc(84% - 1px), rgba(250, 250, 250, 0.03) 84%, transparent calc(84% + 1px));
  pointer-events: none;
}
.article-hero::after {
  /* Warm ember bleed from left edge — reactor glow behind hull */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: radial-gradient(ellipse at 0% 50%, rgba(255, 122, 46, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.article-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 72px 40px 56px;
  position: relative;
  z-index: 2;
  width: 100%;
}
.article-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 6px 12px 6px 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  border-left: 2px solid var(--ember);
  padding-left: 14px;
}
.article-hero__eyebrow::before {
  content: "";
  display: none;
}
.article-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  margin-bottom: 18px;
  max-width: 20ch;
}
.article-hero__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--chrome-warm);
  max-width: 56ch;
  margin-bottom: 32px;
}
.article-hero__byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 250, 250, 0.06);
  max-width: 56ch;
}
.article-hero__avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--bg-avatar);
  color: var(--ember);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 122, 46, 0.40);
  box-shadow: inset 0 0 12px rgba(255, 122, 46, 0.15), 0 0 12px rgba(255, 122, 46, 0.20);
  border-radius: 50%;
}
.article-hero__byline-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.article-hero__byline-author {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.article-hero__byline-info {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
}
.article-hero__byline-info span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--chrome-dim);
}

/* -------------------- ARTICLE BODY -------------------- */
.article-body {
  background: var(--bg-body);
  padding: 72px 40px 56px;
}
.article-body__inner {
  max-width: 68ch;
  margin: 0 auto;
}
.article-body__section-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--chrome-highlight);
  margin: 48px 0 18px;
  letter-spacing: 0.8px;
}
.article-body__section-title:first-child { margin-top: 0; }
.article-body__paragraph {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--chrome-warm);
  margin-bottom: 20px;
}
.article-body__paragraph:last-of-type { margin-bottom: 0; }
.article-body__signoff {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 176, 166, 0.12);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--chrome-dim);
  font-style: italic;
}
.article-body__signoff strong {
  color: var(--chrome-warm);
  font-weight: 600;
  font-style: normal;
}

/* -------------------- EMBER HAIRLINE SEPARATOR -------------------- */
.ember-hairline {
  max-width: 68ch;
  margin: 56px auto 0;
  padding: 0 40px;
  height: 1px;
  position: relative;
}
.ember-hairline__line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ember) 20%, var(--ember-glow) 50%, var(--ember) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 122, 46, 0.50);
}

/* -------------------- ARTICLE TAG ROW -------------------- */
.article-tags {
  padding: 40px 40px 0;
}
.article-tags__inner {
  max-width: 68ch;
  margin: 0 auto;
}
.article-tags__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 14px;
}
.article-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.article-tags__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-card);
  color: var(--chrome-warm);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 122, 46, 0.30);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.article-tags__chip:hover {
  background: var(--bg-card-lift);
  border-color: var(--ember);
}

/* -------------------- ARTICLE SHARE ROW -------------------- */
.article-share {
  padding: 32px 40px 0;
}
.article-share__inner {
  max-width: 68ch;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.article-share__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.article-share__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.article-share__button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--chrome-warm);
  border: 1px solid rgba(184, 176, 166, 0.20);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.article-share__button:hover {
  color: var(--ember);
  border-color: var(--ember);
  background: rgba(255, 122, 46, 0.06);
}
.article-share__button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* -------------------- RELATED ARTICLES 3-UP -------------------- */
.related-articles {
  padding: 72px 40px 96px;
  background: var(--bg-page);
}
.related-articles__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.related-articles__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(184, 176, 166, 0.10);
}
.related-articles__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}
.related-articles__meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Related card — nested block, ground-relative */
.related-card {
  background: var(--bg-card);
  box-shadow: var(--panel-lift);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.related-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(250, 250, 250, 0.32);
  z-index: 3;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.14), 0 12px 32px -8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 122, 46, 0.10);
}
.related-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hull-panel-dark);
}
.related-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.related-card:hover .related-card__image { transform: scale(1.03); }
.related-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(6, 6, 6, 0.65) 100%);
  pointer-events: none;
}
.related-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.related-card__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid rgba(255, 122, 46, 0.40);
  background: rgba(255, 122, 46, 0.05);
}
.related-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--chrome-highlight);
  margin-top: 2px; letter-spacing: 0.8px; }
.related-card__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--chrome-dim);
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.related-card__meta::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--ember);
  border-radius: 50%;
}

/* -------------------- SITE FOOTER -------------------- */
.site-footer {
  background: var(--bg-footer);
  padding: 72px 40px 40px;
  position: relative;
  border-top: 1px solid rgba(255, 122, 46, 0.30);
  box-shadow: 0 -8px 24px -8px rgba(255, 122, 46, 0.20);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ember) 30%, var(--ember-glow) 50%, var(--ember) 70%, transparent 100%);
  opacity: 0.7;
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
}
.site-footer__brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  margin-bottom: 18px;
}
.site-footer__brand-mark span {
  color: var(--ember);
}
.site-footer__brand-blurb {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--chrome-dim);
  line-height: 1.55;
  max-width: 32ch;
}
.site-footer__col-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  margin-bottom: 20px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--chrome-dim);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.site-footer__col li:hover { color: var(--chrome-warm); }
.site-footer__legal {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}
.site-footer__legal-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 900px) {
  .related-articles__grid { grid-template-columns: 1fr; gap: 20px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-nav__links { display: none; }
  .article-hero__title { font-size: 36px; letter-spacing: 0.8px; }
  .article-hero__subtitle { font-size: 16px; }
  .article-body__section-title { font-size: 24px; letter-spacing: 0.8px; }
  .article-body__paragraph { font-size: 16px; }
  .article-hero__inner { padding: 56px 24px 40px; }
  .article-body { padding: 56px 24px 40px; }
  .related-articles { padding: 48px 24px 64px; }
  .article-tags, .article-share, .ember-hairline { padding-left: 24px; padding-right: 24px; }
  .site-footer { padding: 56px 24px 32px; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__legal-links { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-nav__inner { padding: 16px 20px; }
  .site-nav__brand { font-size: 16px; }
  .article-hero { min-height: 320px; }
  .article-hero__title { font-size: 30px; letter-spacing: 0.8px; }
  .article-share__inner { flex-wrap: wrap; }
}

/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }
</style>
</head>
<body>

<!-- SITE NAV -->
<nav class="site-nav" aria-label="Primary">
  <div class="site-nav__inner">
    <a href="/" class="site-nav__brand">ARTS<span class="site-nav__brand-mark">A</span>BERS</a>
    <ul class="site-nav__links">
      <li><a href="/lightsabers" class="site-nav__link">Lightsabers</a></li>
      <li><a href="/cosplay-helmets" class="site-nav__link">Cosplay Helmets</a></li>
      <li><a href="/parts-accessories" class="site-nav__link">Parts & Accessories</a></li>
      <li><a href="/offers-deals" class="site-nav__link">Offers & Deals</a></li>
      <li><a href="/blog" class="site-nav__link">Blog & News</a></li>
    </ul>
    <div class="site-nav__actions">
      <a href="/account" class="site-nav__action">Account</a>
      <a href="/cart" class="site-nav__action site-nav__action-cart">Cart<span class="site-nav__action-badge">0</span></a>
    </div>
  </div>
</nav>

<!-- ARTICLE HERO — compact 360px, panel-joint background, byline inside -->
<a id="tf-hero-editorial-1" data-tf-family="hero-editorial" style="display:contents"></a>
<header class="article-hero">
  <div class="article-hero__inner">
    <div class="article-hero__eyebrow">ARTSABERS News</div>
    <h1 class="article-hero__title">Order Delay Update: Production & Fulfilment Status</h1>
    <p class="article-hero__subtitle">A candid update on where your order sits and when you'll hear from us next.</p>
    <div class="article-hero__byline">
      <div class="article-hero__avatar" aria-hidden="true">C</div>
      <div class="article-hero__byline-meta">
        <div class="article-hero__byline-author">Chloe</div>
        <div class="article-hero__byline-info"><span>8 Jul 2026</span><span>3 min read</span></div>
      </div>
    </div>
  </div>
</header>

<!-- ARTICLE BODY -->
<article class="article-body">
  <div class="article-body__inner">
    <h2 class="article-body__section-title">Where we are right now</h2>
    <p class="article-body__paragraph">Straight to it. Sabers ordered before 20 March are leaving the workshop through mid-April. If you ordered later than that, your build is queued behind those and we'll get to it as soon as capacity opens up. The delay isn't a warehouse problem — it's a workshop throughput problem. The workshop is running at full capacity on Xenopixel V3 and Proffie 2.2 tiers while it brings extra workshop hours online. No shortcuts on QC, no builds pushed to the next tier's Saber Core, no colour swaps without asking first. If your saber is delayed, the reason is that we'd rather stand behind an honestly-timed dispatch than promise dates the workshop can't hit, and we own that trade-off.</p>

    <h2 class="article-body__section-title">What happens next</h2>
    <p class="article-body__paragraph">Every order still gets the same treatment. If you haven't heard from us and your order is more than seven days past its estimated ship date, email support@artsabers.com and we'll come back to you within 24 hours with a real answer — not a template, not a stall. If you'd rather cancel and wait for the next production window, we'll refund in full, no back-and-forth. If you want to change a blade colour or step up a Saber Core tier while your build is still queued, we can do that too — one email, one reply, one change. We're here through the delay, and we'll be here after the delay.</p>

    <div class="article-body__signoff">
      <strong>Signed, Matthew (ARTSABERS)</strong>
    </div>
  </div>
</article>

<!-- EMBER HAIRLINE SEPARATOR -->
<div class="ember-hairline">
  <div class="ember-hairline__line"></div>
</div>

<!-- TAG CHIP ROW -->
<section class="article-tags" aria-label="Article tags">
  <div class="article-tags__inner">
    <div class="article-tags__label">Tagged</div>
    <ul class="article-tags__list">
      <li><a href="/tag/order-status" class="article-tags__chip">Order Status</a></li>
      <li><a href="/tag/fulfilment" class="article-tags__chip">Fulfilment</a></li>
      <li><a href="/tag/backorders" class="article-tags__chip">Backorders</a></li>
      <li><a href="/tag/us-warehouse" class="article-tags__chip">US Warehouse</a></li>
      <li><a href="/tag/community-update" class="article-tags__chip">Community Update</a></li>
    </ul>
  </div>
</section>

<!-- SHARE ROW -->
<section class="article-share" aria-label="Share this article">
  <div class="article-share__inner">
    <div class="article-share__label">Share</div>
    <ul class="article-share__list">
      <li><a href="#" class="article-share__button" aria-label="Share on X">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
      </a></li>
      <li><a href="#" class="article-share__button" aria-label="Share on Facebook">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.99 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.891h-2.33v6.987C18.343 21.128 22 16.99 22 12z"/></svg>
      </a></li>
      <li><a href="#" class="article-share__button" aria-label="Share on Reddit">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12.6c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
      </a></li>
      <li><a href="#" class="article-share__button" aria-label="Copy link">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.59 13.41a1 1 0 0 0 1.42 0l4-4a3 3 0 1 0-4.24-4.24l-.7.7a1 1 0 1 0 1.41 1.41l.71-.7a1 1 0 0 1 1.41 1.41l-4 4a1 1 0 0 0 0 1.42zM13.41 10.59a1 1 0 0 0-1.42 0l-4 4a3 3 0 1 0 4.24 4.24l.7-.7a1 1 0 1 0-1.41-1.41l-.71.7a1 1 0 0 1-1.41-1.41l4-4a1 1 0 0 0 0-1.42z"/></svg>
      </a></li>
    </ul>
  </div>
</section>

<!-- RELATED ARTICLES 3-UP -->
<a id="tf-related-post-rail-1" data-tf-family="related-post-rail" style="display:contents"></a>
<section class="related-articles" aria-label="Related articles">
  <div class="related-articles__inner">
    <div class="related-articles__header">
      <h2 class="related-articles__title">Related Reading</h2>
      <div class="related-articles__meta">More from the Blog</div>
    </div>
    <div class="related-articles__grid">

      <a href="/blog/forged-in-fire-and-beskar" class="related-card">
        <div class="related-card__media">
          <img class="related-card__image" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="Mandalorian helmet against dark background">
        </div>
        <div class="related-card__body">
          <span class="related-card__chip">Lightsaber Guides & Tips</span>
          <h3 class="related-card__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
          <div class="related-card__meta">8 min read</div>
        </div>
      </a>

      <a href="/blog/claim-the-blade" class="related-card">
        <div class="related-card__media">
          <img class="related-card__image" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg" alt="Carbon Strike saber close-up">
        </div>
        <div class="related-card__body">
          <span class="related-card__chip">Lore & Short Stories</span>
          <h3 class="related-card__title">Claim the Blade. Wear the Mask. Live the Myth.</h3>
          <div class="related-card__meta">12 min read</div>
        </div>
      </a>

      <a href="/blog/us-winter-storm-delays" class="related-card">
        <div class="related-card__media">
          <img class="related-card__image" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 lightsaber">
        </div>
        <div class="related-card__body">
          <span class="related-card__chip">ARTSABERS News</span>
          <h3 class="related-card__title">Temporary Delays Due To US Winter Storm</h3>
          <div class="related-card__meta">2 min read</div>
        </div>
      </a>

    </div>
  </div>
</section>

<!-- SITE FOOTER -->
<footer class="site-footer" aria-label="Site footer">
  <div class="site-footer__inner">
    <div class="site-footer__grid">
      <div class="site-footer__col site-footer__col--brand">
        <div class="site-footer__brand-mark">ARTS<span>A</span>BERS</div>
        <p class="site-footer__brand-blurb">Hundreds of sabers. One trusted retailer. Every character, every Saber Core, every duelling grade — from factory floor to your door.</p>
      </div>
      <div class="site-footer__col">
        <div class="site-footer__col-title">Shop</div>
        <ul>
          <li><a href="/lightsabers">Lightsabers</a></li>
          <li><a href="/cosplay-helmets">Cosplay Helmets</a></li>
          <li><a href="/parts-accessories">Parts & Accessories</a></li>
          <li><a href="/offers-deals">Offers & Deals</a></li>
          <li><a href="/bundles">Bundles</a></li>
        </ul>
      </div>
      <div class="site-footer__col">
        <div class="site-footer__col-title">Read</div>
        <ul>
          <li><a href="/blog">Blog & News</a></li>
          <li><a href="/guides">Buying Guides</a></li>
          <li><a href="/lore">Lore & Short Stories</a></li>
          <li><a href="/about">About ARTSABERS</a></li>
          <li><a href="/press">Press</a></li>
        </ul>
      </div>
      <div class="site-footer__col">
        <div class="site-footer__col-title">Support</div>
        <ul>
          <li><a href="/contact">Contact Us</a></li>
          <li><a href="/shipping">Shipping & Delivery</a></li>
          <li><a href="/returns">Returns & Warranty</a></li>
          <li><a href="/track">Track My Order</a></li>
          <li><a href="/faq">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="site-footer__legal">
      <div>© 2026 ARTSABERS. All rights reserved.</div>
      <ul class="site-footer__legal-links">
        <li><a href="/privacy">Privacy</a></li>
        <li><a href="/terms">Terms</a></li>
        <li><a href="/cookies">Cookies</a></li>
      </ul>
    </div>
  </div>
</footer>

</body>
</html>