/wire-template.
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claim the Blade. Wear the Mask. Live the Myth. — 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=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* =====================================================================
TOKENS — verbatim from Kyber Hull SAS1
===================================================================== */
:root {
/* Ember ombre */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
/* Hull ladder */
--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 / whites */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Semantic surfaces */
--bg-hero: var(--carbon);
--bg-section: var(--charcoal);
--bg-section-alt: var(--charcoal-warm);
--bg-section-deep: var(--void);
--bg-footer: var(--carbon);
--bg-card: var(--hull-panel);
--bg-card-lift: var(--hull-panel-lift);
/* Text roles */
--text-body: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-dim: var(--chrome-dim);
--text-accent: var(--ember);
/* Fonts */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
/* Shadows */
--panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 48px -8px rgba(0,0,0,0.95);
--ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
--ember-glow-md: 0 0 32px rgba(255,122,46,0.55);
--ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
--ember-seam-glow: 0 -8px 24px -4px rgba(255,122,46,0.4);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.3);
/* Type scale */
--body-max: 68ch;
--content-max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-hero);
color: var(--text-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* =====================================================================
SITE NAV
===================================================================== */
.site-nav {
position: sticky; top: 0; z-index: 100;
background: rgba(6,6,6,0.94);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(46,46,46,0.5);
box-shadow: var(--chrome-top-soft);
}
.site-nav__inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 18px 32px;
display: flex;
align-items: center;
gap: 40px;
}
.site-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.14em;
color: var(--text-heading);
text-transform: uppercase;
text-decoration: none;
display: flex; align-items: center; gap: 8px;
}
.site-nav__brand::before {
content: "";
width: 8px; height: 8px;
background: var(--ember);
box-shadow: 0 0 12px var(--ember);
display: inline-block;
}
.site-nav__links {
display: flex; gap: 28px;
list-style: none;
margin-left: auto;
}
.site-nav__link {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--chrome-warm);
text-decoration: none;
padding: 6px 0;
transition: color 0.2s;
}
.site-nav__link:hover { color: var(--ember); }
.site-nav__link--active { color: var(--ember); }
.site-nav__icons {
display: flex; gap: 16px;
margin-left: 8px;
}
.site-nav__icon {
width: 20px; height: 20px;
color: var(--chrome-warm);
cursor: pointer;
transition: color 0.2s;
}
.site-nav__icon:hover { color: var(--ember); }
/* =====================================================================
ARTICLE HERO — FULL-BLEED
===================================================================== */
.article-hero {
position: relative;
height: 700px;
overflow: visible;
background: var(--carbon);
isolation: isolate;
}
.article-hero__backdrop {
position: absolute; inset: 0;
background:
url("https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg") center/cover no-repeat,
#060404;
z-index: 0;
}
.article-hero__backdrop::after {
/* faint hairline hull seam */
content: "";
position: absolute;
left: 0; right: 0;
top: 58%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.45) 30%, rgba(255,179,71,0.55) 50%, rgba(255,122,46,0.4) 70%, transparent 100%);
box-shadow: 0 0 24px rgba(255,122,46,0.3);
}
.article-hero__overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,6,0.72) 0%, rgba(6,6,6,0.45) 45%, rgba(6,6,6,0.65) 100%),
radial-gradient(ellipse 60% 40% at 50% 20%, rgba(6,6,6,0.62) 0%, transparent 60%);
z-index: 1;
}
.article-hero__bloom {
position: absolute;
right: -80px; bottom: -80px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(255,179,71,0.35) 0%, rgba(255,122,46,0.18) 30%, transparent 65%);
filter: blur(4px);
z-index: 2;
pointer-events: none;
}
.article-hero__inner {
position: relative;
z-index: 3;
height: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 96px;
}
.article-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border: 1px solid rgba(255,122,46,0.5);
background: rgba(255,122,46,0.06);
color: var(--ember-glow);
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
width: fit-content;
margin-bottom: 32px;
box-shadow: inset 0 1px 0 rgba(255,179,71,0.25);
}
.article-hero__eyebrow::before {
content: "";
width: 6px; height: 6px;
background: var(--ember);
box-shadow: 0 0 8px var(--ember);
}
.article-hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(48px, 7.4vw, 108px);
line-height: 0.98;
letter-spacing: 0.8px;
color: var(--chrome-highlight);
max-width: 22ch;
margin-bottom: 28px;
text-shadow: 0 4px 32px rgba(0,0,0,0.6);
}
.article-hero__subtitle {
font-family: var(--font-body);
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.45;
color: var(--chrome-warm);
max-width: 46ch;
font-weight: 400;
opacity: 0.92;
}
/* Panel seam glow marking end of hero */
.article-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.75) 25%, rgba(255,179,71,0.85) 50%, rgba(255,122,46,0.7) 75%, transparent 100%);
box-shadow: 0 -10px 32px rgba(255,122,46,0.35), 0 8px 24px rgba(255,122,46,0.25);
z-index: 4;
}
/* =====================================================================
BYLINE ROW — after scroll
===================================================================== */
.byline-row {
background: var(--charcoal);
padding: 44px 32px 40px;
box-shadow: var(--chrome-top-soft);
}
.byline-row__details span:not(:last-child)::after {
content: "·";
margin-left: 12px;
color: var(--hull-edge);
}
.byline-row__save:hover {
background: var(--hull-panel-lift);
box-shadow: var(--chrome-top-soft);
}
/* =====================================================================
ARTICLE BODY
===================================================================== */
.article-body {
background: var(--charcoal);
padding: 24px 32px 96px;
}
.article-body__inner {
max-width: var(--body-max);
margin: 0 auto;
}
.article-body p {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.72;
color: var(--chrome-warm);
margin-bottom: 1.4em;
}
.article-body p.has-drop-cap::first-letter,
.article-body__dropcap p:first-child::first-letter {
float: left;
font-family: var(--font-display);
font-weight: 700;
color: var(--ember);
font-size: 5.6em;
line-height: 0.88;
padding: 0.06em 0.12em 0 0;
margin-top: 0.04em;
text-shadow: 0 0 24px rgba(255,122,46,0.25);
}
.article-body h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 3.4vw, 40px);
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--chrome-highlight);
text-transform: none;
margin: 1.6em 0 0.6em;
}
.article-body em {
font-style: italic;
color: var(--chrome-glint);
}
/* Section-break hairline */
.section-break {
margin: 2.4em auto 2.2em;
height: 1px;
max-width: 40%;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 30%, rgba(255,179,71,0.7) 50%, rgba(255,122,46,0.5) 70%, transparent 100%);
position: relative;
}
.section-break::before {
content: "";
position: absolute;
left: 50%; top: -3px;
transform: translateX(-50%);
width: 7px; height: 7px;
background: var(--ember);
box-shadow: 0 0 12px var(--ember);
}
/* =====================================================================
PULL QUOTE — large, ~40% scroll
===================================================================== */
.pullquote {
margin: 2.8em -32px;
padding: 56px 32px;
text-align: center;
position: relative;
}
/* =====================================================================
INLINE IMAGE PAIR — ~60% scroll
===================================================================== */
.image-pair {
margin: 2.4em -32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.image-pair__figure { margin: 0; }
.image-pair__img-wrap {
position: relative;
background: var(--hull-panel-dark);
aspect-ratio: 1 / 1;
overflow: hidden;
box-shadow: var(--panel-lift);
}
.image-pair__img-wrap::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(6,6,6,0.35) 100%);
z-index: 1;
pointer-events: none;
}
.image-pair__img-wrap::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(250,250,250,0.3);
z-index: 2;
}
.image-pair__img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.92) contrast(1.05);
}
.image-pair__caption {
margin-top: 14px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
font-style: italic;
color: var(--chrome-dim);
padding-left: 12px;
border-left: 1px solid rgba(255,122,46,0.4);
}
/* =====================================================================
FULL-BLEED IMAGE BREAK — ~75% scroll
===================================================================== */
.image-fullbleed {
margin: 3em calc(50% - 50vw) 2.4em;
width: 100vw;
position: relative;
}
.image-fullbleed__wrap {
position: relative;
background: var(--hull-panel-dark);
height: min(560px, 62vw);
overflow: hidden;
box-shadow: var(--panel-lift);
}
.image-fullbleed__wrap::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(250,250,250,0.35) 50%, transparent 100%);
z-index: 2;
}
.image-fullbleed__wrap::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.55) 50%, transparent 100%);
box-shadow: 0 0 20px rgba(255,122,46,0.35);
z-index: 2;
}
.image-fullbleed__img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.86) contrast(1.08);
}
.image-fullbleed__overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,6,6,0.4) 0%, transparent 30%, transparent 70%, rgba(6,6,6,0.55) 100%),
radial-gradient(ellipse 40% 60% at 20% 50%, rgba(255,122,46,0.14) 0%, transparent 65%);
z-index: 1;
}
.image-fullbleed__caption {
max-width: var(--body-max);
margin: 22px auto 0;
padding: 0 32px;
font-family: var(--font-body);
font-size: 14px;
font-style: italic;
color: var(--chrome-dim);
display: flex;
gap: 12px;
align-items: baseline;
}
.image-fullbleed__caption-eyebrow {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
font-style: normal;
white-space: nowrap;
}
/* =====================================================================
ATTRIBUTED BLOCKQUOTE — ~85% scroll
===================================================================== */
.article-blockquote {
margin: 2.4em 0;
padding: 24px 28px;
border-left: 3px solid var(--ember);
background: linear-gradient(90deg, rgba(255,122,46,0.08) 0%, rgba(255,122,46,0.02) 40%, transparent 100%);
box-shadow: -8px 0 20px -12px rgba(255,122,46,0.35);
}
.article-blockquote__cite::before {
content: "— ";
color: var(--ember);
margin-right: 4px;
}
/* =====================================================================
TERMINAL SIGN-OFF
===================================================================== */
.article-signoff {
margin: 2.4em 0 0;
padding-top: 1.6em;
font-family: var(--font-body);
font-style: italic;
font-size: 18px;
color: var(--chrome-glint);
text-align: left;
}
.article-signoff::before {
content: "";
display: block;
width: 60px; height: 1px;
background: linear-gradient(90deg, var(--ember) 0%, transparent 100%);
margin-bottom: 1.4em;
}
/* =====================================================================
ARTICLE FOOTER — tags + share + related + continue
===================================================================== */
.article-footer {
background: var(--charcoal);
padding: 0 32px 0;
}
.article-footer__hairline {
max-width: var(--body-max);
margin: 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 20%, rgba(255,179,71,0.65) 50%, rgba(255,122,46,0.5) 80%, transparent 100%);
box-shadow: 0 0 16px rgba(255,122,46,0.25);
}
/* Tag chip row */
.tag-row {
max-width: var(--body-max);
margin: 0 auto;
padding: 40px 0 24px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tag-row__label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-right: 8px;
}
.tag-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
background: var(--hull-panel);
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,122,46,0.25);
transition: all 0.2s;
}
.tag-chip:hover {
background: var(--hull-panel-lift);
border-color: rgba(255,122,46,0.4);
color: var(--ember-glow);
}
/* Share row */
.share-row {
max-width: var(--body-max);
margin: 0 auto;
padding: 16px 0 40px;
display: flex;
align-items: center;
gap: 12px;
}
.share-row__label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-right: 4px;
}
.share-row__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid rgba(62,62,62,0.6);
color: var(--chrome-warm);
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
}
.share-row__btn:hover {
background: var(--hull-panel-lift);
border-color: rgba(255,122,46,0.4);
color: var(--ember-glow);
box-shadow: var(--chrome-top-soft);
}
/* Related articles 3-up */
.related-band {
background: var(--charcoal);
padding: 56px 32px 72px;
position: relative;
}
.related-band__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.related-band__eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.related-band__eyebrow::before {
content: "";
width: 24px; height: 1px;
background: var(--ember);
box-shadow: 0 0 6px var(--ember);
}
.related-band__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3vw, 38px);
color: var(--chrome-highlight);
margin-bottom: 40px;
letter-spacing: 0.8px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.related-card {
background: var(--hull-panel);
text-decoration: none;
color: inherit;
display: block;
box-shadow: var(--panel-lift);
transition: box-shadow 0.3s, transform 0.3s;
position: relative;
}
.related-card:hover {
box-shadow: var(--panel-lift-hover), var(--ember-glow-sm);
transform: translateY(-2px);
}
.related-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--hull-panel-dark);
}
.related-card__media::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(250,250,250,0.3);
z-index: 2;
}
.related-card__img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.94);
transition: transform 0.4s, filter 0.3s;
}
.related-card:hover .related-card__img {
transform: scale(1.04);
filter: brightness(1);
}
.related-card__body {
padding: 22px 22px 26px;
}
.related-card__category {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.related-card__category::before {
content: "";
width: 5px; height: 5px;
background: var(--ember);
box-shadow: 0 0 6px var(--ember);
}
.related-card__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 1.25;
color: var(--chrome-highlight);
margin-bottom: 14px;
letter-spacing: 0.8px;
}
.related-card__meta {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
/* Continue-the-story band (LORE-ONLY) */
.continue-band {
background: var(--charcoal-warm);
position: relative;
padding: 34px 32px;
text-decoration: none;
color: inherit;
display: block;
transition: background 0.3s;
}
.continue-band::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.55) 20%, rgba(255,179,71,0.7) 50%, rgba(255,122,46,0.55) 80%, transparent 100%);
box-shadow: 0 8px 24px -4px rgba(255,122,46,0.3);
}
.continue-band:hover {
background: linear-gradient(180deg, rgba(255,122,46,0.04) 0%, var(--charcoal-warm) 100%);
}
.continue-band__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 32px;
min-height: 96px;
}
.continue-band__left {
flex: 1;
min-width: 0;
}
.continue-band__eyebrow {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.continue-band__title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.25;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
}
.continue-band__right {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.continue-band__chip {
padding: 6px 12px;
border: 1px solid rgba(255,122,46,0.4);
color: var(--ember-glow);
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
background: rgba(255,122,46,0.04);
}
.continue-band__reading {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.continue-band__arrow {
font-family: var(--font-display);
font-size: 22px;
color: var(--ember);
font-weight: 600;
transition: transform 0.3s;
}
.continue-band:hover .continue-band__arrow {
transform: translateX(6px);
}
/* =====================================================================
SITE FOOTER
===================================================================== */
.site-footer {
background: var(--carbon);
padding: 72px 32px 32px;
position: relative;
color: var(--chrome-dim);
}
.site-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,122,46,0.5) 30%, rgba(255,179,71,0.65) 50%, rgba(255,122,46,0.5) 70%, transparent 100%);
box-shadow: 0 8px 24px -4px rgba(255,122,46,0.28);
}
.site-footer__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(46,46,46,0.4);
}
.site-footer__brand-col .site-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.14em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin-bottom: 18px;
display: flex; align-items: center; gap: 8px;
}
.site-footer__brand::before {
content: "";
width: 8px; height: 8px;
background: var(--ember);
box-shadow: 0 0 12px var(--ember);
}
.site-footer__tag {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
line-height: 1.6;
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-warm);
margin-bottom: 20px;
}
.site-footer__col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__col a {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
text-decoration: none;
transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--ember); }
.site-footer__bottom {
padding-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.site-footer__copy {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
}
.site-footer__legal {
display: flex;
gap: 24px;
}
.site-footer__legal a {
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
text-decoration: none;
}
.site-footer__legal a:hover { color: var(--ember); }
/* =====================================================================
MOBILE
===================================================================== */
@media (max-width: 860px) {
.site-nav__links { display: none; }
.article-hero { height: 560px; }
.article-hero__inner { padding-bottom: 56px; }
.article-hero__title { font-size: clamp(40px, 10vw, 60px); letter-spacing: 0.8px; }
.article-body { padding: 24px 24px 72px; }
.article-body p { font-size: 17px; line-height: 1.7; }
.article-body__dropcap p:first-child::first-letter { font-size: 4.6em; }
.pullquote { margin: 2.4em -24px; padding: 44px 24px; }
.pullquote__text { font-size: clamp(24px, 6vw, 32px); }
.image-pair { margin: 2em -24px; grid-template-columns: 1fr; gap: 18px; }
.image-pair__img-wrap { aspect-ratio: 4 / 3; }
.image-fullbleed__wrap { height: 320px; }
.related-grid { grid-template-columns: 1fr; gap: 24px; }
.continue-band__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
.continue-band__right { flex-wrap: wrap; }
.site-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.site-footer__brand-col { grid-column: 1 / -1; }
.byline-row__inner { gap: 16px; }
.byline-row__save { margin-left: auto; }
}
/* =====================================================================
BLOCK: product-feature — inline advert (long-form only)
Product variant shown here. Variant classes: --product, --category, --newsletter, --promotion.
===================================================================== */
.product-feature {
/* Break out of the article's reading column and centre on the viewport.
Reading column max-width is ~68ch (~660px); the block wants 1100px. */
position: relative;
width: min(1100px, calc(100vw - 48px));
margin-left: 50%;
margin-right: 0;
margin-top: 120px;
margin-bottom: 120px;
transform: translateX(-50%);
padding: 0;
background: var(--charcoal-warm, #161412);
border-top: 1px solid rgba(255,122,46,0.55);
border-bottom: 1px solid rgba(255,122,46,0.55);
box-shadow: 0 -2px 40px rgba(255,122,46,0.18), 0 2px 40px rgba(255,122,46,0.18);
overflow: hidden;
isolation: isolate;
}
.product-feature__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 380px 1fr;
gap: 0;
align-items: stretch;
}
.product-feature__media {
position: relative;
background: #0a0a0a;
overflow: hidden;
min-width: 0;
min-height: 100%;
}
.product-feature__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.product-feature:hover .product-feature__img { transform: scale(1.03); }
.product-feature__copy {
padding: 48px 52px 48px 48px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.product-feature__eyebrow {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember-glow, #FFB347);
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
text-shadow: 0 0 20px rgba(255,122,46,0.35);
}
.product-feature__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--ember, #FF7A2E);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.product-feature__title {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.12;
letter-spacing: 0.8px;
color: var(--chrome-highlight, #FAFAFA);
margin: 0;
}
.product-feature__lede {
font-family: var(--font-body, 'Manrope', sans-serif);
font-size: 16px;
line-height: 1.55;
color: var(--chrome-warm, #E5E2E1);
margin: 0;
opacity: 0.9;
}
.product-feature__actions {
display: flex;
align-items: center;
gap: 20px;
margin-top: 6px;
}
.product-feature__price {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 22px;
font-weight: 500;
color: var(--ember, #FF7A2E);
letter-spacing: 0.01em;
}
.product-feature__cta {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm, #E5E2E1);
text-decoration: none;
padding: 12px 22px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(255,122,46,0.06);
transition: background 0.2s, box-shadow 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-feature__cta:hover {
background: rgba(255,122,46,0.14);
box-shadow: 0 0 24px rgba(255,122,46,0.35);
color: var(--chrome-highlight, #FAFAFA);
}
.product-feature__bloom {
position: absolute;
z-index: 1;
right: -140px;
bottom: -140px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(255,179,71,0.16) 0%, rgba(255,122,46,0.08) 35%, transparent 68%);
filter: blur(12px);
pointer-events: none;
}
.product-feature__bloom--tl {
right: auto;
bottom: auto;
left: -100px;
top: -100px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255,179,71,0.28) 0%, rgba(255,122,46,0.14) 30%, transparent 65%);
}
/* Enrichment elements — badge, rating, specs, stock, enhanced CTA */
.product-feature__media { position: relative; }
.product-feature__badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.85);
background: rgba(6,6,6,0.85);
backdrop-filter: blur(4px);
color: var(--ember-glow, #FFB347);
font-family: 'Space Grotesk', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 3;
text-shadow: 0 0 12px rgba(255,122,46,0.4);
}
.product-feature__rating {
display: flex;
align-items: center;
gap: 10px;
margin: -2px 0;
}
.product-feature__stars {
color: var(--ember, #FF7A2E);
font-size: 16px;
letter-spacing: 0.05em;
text-shadow: 0 0 12px rgba(255,122,46,0.35);
}
.product-feature__rating-value {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--chrome-highlight, #FAFAFA);
}
.product-feature__review-count {
font-family: 'Manrope', sans-serif;
font-size: 13px;
color: var(--chrome-dim, #B8B0A6);
}
.product-feature__review-count::before {
content: "·";
margin-right: 8px;
color: var(--chrome-dim, #B8B0A6);
}
.product-feature__specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.product-feature__specs li {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm, #E5E2E1);
padding: 6px 12px;
border: 1px solid rgba(184,176,166,0.35);
background: rgba(20,20,20,0.4);
}
.product-feature__stock {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ember-glow, #FFB347);
margin-top: 4px;
}
.product-feature__stock::before {
content: "";
width: 9px;
height: 9px;
background: var(--ember, #FF7A2E);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,122,46,0.7);
}
.product-feature__cta {
font-size: 13px;
padding: 14px 26px;
letter-spacing: 0.18em;
}
.product-feature__actions {
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid rgba(255,122,46,0.25);
}
@media (max-width: 720px) {
.product-feature__inner { grid-template-columns: 1fr; }
.product-feature__media { aspect-ratio: 16 / 9; }
.product-feature__copy { padding: 28px 24px 32px; }
.product-feature__title { font-size: 22px; letter-spacing: 0.8px; }
.product-feature__actions { flex-wrap: wrap; }
.product-feature__specs li { font-size: 10px; padding: 5px 10px; }
.product-feature__badge { top: 12px; left: 12px; font-size: 9px; padding: 6px 10px; }
}
/* =====================================================================
UNIFIED SITE CHROME — copied from MAS64 (later rules override any earlier definitions above).
===================================================================== */
/* -------------------- 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;
}
/* -------------------- 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;
}
@media (max-width: 900px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.site-nav__links { display: none; }
.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; }
}
/* 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; }
/* -- Reconciled from family 14030 canonical 13173:tf-author-byline-1 -- */
/* =========================================================================
BLOCK: byline-row — avatar + name + date + reading time + category
========================================================================= */
.byline-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
}
.byline-row__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--carbon);
border: 1px solid rgba(255,122,46,0.55);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--ember);
letter-spacing: 0.02em;
box-shadow: var(--ember-glow-sm);
flex-shrink: 0;
}
.byline-row__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--chrome-warm);
letter-spacing: 0.02em;
}
.byline-row__sep {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--chrome-dim);
opacity: 0.6;
}
.byline-row__meta {
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
}
/* -- Reconciled from family 14016 canonical 13173:tf-pull-quote-1 -- */
/* -- Reconciled from family 14016 canonical 13184:tf-pull-quote-2 -- */
/* =====================================================================
ATTRIBUTED BLOCKQUOTE — ~85% scroll
===================================================================== */
.article-blockquote {
margin: 2.4em 0;
padding: 24px 28px;
border-left: 3px solid var(--ember);
background: linear-gradient(90deg, rgba(255,122,46,0.08) 0%, rgba(255,122,46,0.02) 40%, transparent 100%);
box-shadow: -8px 0 20px -12px rgba(255,122,46,0.35);
}
.article-blockquote__text {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.35;
color: var(--chrome-highlight);
font-style: italic;
margin-bottom: 12px;
}
.article-blockquote__cite {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-dim);
font-style: normal;
display: block;
}
.article-blockquote__cite::before {
content: "— ";
color: var(--ember);
margin-right: 4px;
}
</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 — full-bleed atmospheric, ~700px
============================================================ -->
<a id="tf-hero-atmospheric-1" data-tf-family="hero-atmospheric" style="display:contents"></a>
<section class="article-hero">
<div class="article-hero__backdrop"></div>
<div class="article-hero__overlay"></div>
<div class="article-hero__bloom"></div>
<div class="article-hero__inner">
<span class="article-hero__eyebrow">Lore & Short Stories</span>
<h1 class="article-hero__title">Claim the Blade. Wear the Mask. Live the Myth.</h1>
<p class="article-hero__subtitle">One night. One choice. One decision that would change everything.</p>
</div>
</section>
<!-- ============================================================
BYLINE ROW — after scroll (content-first entry)
============================================================ -->
<a id="tf-author-byline-1" data-tf-family="author-byline" style="display:contents"></a>
<div class="byline-editorial">
<div class="byline-editorial__inner">
<div class="byline-editorial__chips">
<a href="/blog/lore-short-stories" class="byline-editorial__category">Lore & Short Stories</a>
<a href="/blog/tag/kyber" class="byline-editorial__tag">Kyber</a>
<a href="/blog/tag/mandalorian" class="byline-editorial__tag">Mandalorian</a>
</div>
<div class="byline-editorial__row">
<div class="byline-editorial__avatar">C</div>
<span class="byline-editorial__name">Chloe</span>
<span class="byline-editorial__sep"></span>
<span class="byline-editorial__meta">3 May 2026</span>
<span class="byline-editorial__sep"></span>
<span class="byline-editorial__meta">12 min read</span>
</div>
</div>
</div>
<!-- ============================================================
ARTICLE BODY — long-form, drop-cap opener, H2 sections
============================================================ -->
<article class="article-body">
<div class="article-body__inner">
<p><em>A short story from the closing years of the Old Republic — Joran Kest, hiltsmith of the Corellian trade docks, and the blade that would not be sent away.</em></p>
<div class="article-body__dropcap">
<p>The workshop was quiet in the way only late workshops are quiet — the hush after every tool has been put down, when the ember at the heart of the forge has cooled to the colour of a first sunrise and the smith has stopped moving because there is nothing left to do. A single low lamp burned above the bench. The rest of the room fell away into carbon shadow. On the felt-lined tray, angled just so, lay the blade — hilt cold, emitter dark, weight distributed the way he had spent forty long evenings distributing it. He looked at it. It looked back, in the mute way that objects do when they have taken on a life you did not intend to give them.</p>
</div>
<p>He had not switched it on. He would not, not yet. To ignite the blade was to invite a decision, and the smith had learned — over years, over hundreds of hilts sent away in paper and packing — that decisions of this kind should never be rushed. Better to sit with a thing. Better to let the quiet ask its own questions. The felt gathered warmth from the metal, or from the room, or from him. It was hard to say. Outside, the wind pressed against the shutters and moved on. Inside, only the low lamp, only the blade, only the smith who had never kept one.</p>
<div class="section-break" role="separator" aria-hidden="true"></div>
<h2>The Ones He Sent Away</h2>
<p>He had built sabers for others for years — a truth so plain he no longer counted the count. There had been the first one, of course, and the first is always remembered; a nervous, over-tightened piece with a soundboard he had wired three times before he trusted it. Its owner had paid in hard credits and left with a joy the smith recognised only in retrospect. There had been the wedding hilt — brushed titanium, initials engraved along the pommel — commissioned by a bride who wanted her groom to duel her at the reception. The heavy-duelling grade for a duelist out of Alderaan who had asked for a blade the colour of rust, because rust reminded him of his father's shed. The small quiet one, ordered by a father for a son, blade retracted always to the child's height. The single-emitter economy piece paid off in fortnightly instalments by a field medic who had wanted, for reasons she did not share, a saber the colour of grief.</p>
<p>He remembered them the way a mason remembers walls: not by their finished faces, but by the moments where a hand had slipped, or a decision had been made against an easy choice. He knew the interior of every hilt he had built. He knew the little compromise where a pommel plate had been sanded thinner than specification because a customer had asked for a lighter piece. He knew the crystal chamber where he had wound the copper an extra half-turn for a duelist who wanted her blade to hum a lower note.</p>
<p>All of them had been sent away. Not one of them had stayed on the bench. Not one had been switched on and considered and kept. The smith had never quite understood why. It was not exactly discipline. It was closer to something he had once heard an old chime-maker say, in an interview years ago — that the maker who plays too often becomes the maker who no longer makes. The instrument, at some point, is either sold or it is not. Between the two states there is no third.</p>
<div class="section-break" role="separator" aria-hidden="true"></div>
<h2>The Blade That Would Not Leave</h2>
<p>This one was different. He had known it from the crystal.</p>
<p>The crystal had come to him without ceremony — a plain grey stone in a plain grey bag, indistinguishable to any test he could put a stone through, and yet it had sat in his palm on the first day and refused to say what colour it wanted to be. Every crystal, in his experience, wanted something. He had held green ones that all but chose their emitters. He had held blue crystals that hummed against the copper as he wound it. He had held the amber ones — the difficult ones — that pushed back against a duelist's grip until you loosened your hand and let them decide the balance. But this one had lain silent. It had waited.</p>
<!-- ~40% PULL QUOTE — verbatim -->
<a id="tf-pull-quote-1" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
<p class="article-blockquote__text">Every crystal wants something. This one wanted silence.</p>
<cite class="article-blockquote__cite">from The Fragments of Cassian</cite>
</blockquote>
<p>He had set it aside for a fortnight, thinking the silence would pass. It did not. He had begun the hilt anyway, because a smith does not sit forever with a stone; a smith works, and the work asks the questions the stone will not. He had milled the pommel long and tapering. He had cut the emitter shroud in matte carbon, ridged for grip. He had polished the choke to a soft graphite sheen that caught the low workshop light and held it. Every choice had been made by his hand, and yet every choice had been made — he could not shake the sense — by the blade in advance of the hand. He had been the instrument, and the blade had been the maker. He had never felt that before.</p>
<p>Now it lay on the tray, complete. It was not, by any measurable metric, the finest hilt he had ever built. It was slightly heavier than his usual specification. The choke was a fraction longer than he would have machined it if he had been thinking with only his own head. And yet the smith knew — as one knows things one cannot prove — that of every hilt he had sent away, this was the first one that had never intended to leave. It had chosen the workshop. Or, more particularly, it had chosen the hand that had wound its copper and set its crystal and closed its pommel. The blade, in the plain silence of the late workshop, was waiting for him to admit it.</p>
<!-- PRODUCT-FEATURE BLOCK — product variant, ~50% scroll (long-form only) -->
<a id="tf-cross-sell-strip-1" data-tf-family="cross-sell-strip" style="display:contents"></a>
<aside class="product-feature product-feature--product" role="complementary" aria-label="Featured product">
<div class="product-feature__inner">
<div class="product-feature__media">
<img class="product-feature__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg" alt="The Fighter Black Lightsaber, Xenopixel V3" loading="lazy">
<span class="product-feature__badge">Editor’s Pick</span>
</div>
<div class="product-feature__copy">
<p class="product-feature__eyebrow">Readers also chose</p>
<h3 class="product-feature__title">The Fighter — Xenopixel V3</h3>
<div class="product-feature__rating">
<span class="product-feature__stars" aria-hidden="true">★★★★★</span>
<span class="product-feature__rating-value">4.9</span>
<span class="product-feature__review-count">247 reviews</span>
</div>
<p class="product-feature__lede">Duelling grade certified. Xenopixel core, silver-forged hilt. Made for the collector who fights with what they own.</p>
<ul class="product-feature__specs">
<li>Xenopixel V3 core</li>
<li>32″ blade</li>
<li>Duelling grade</li>
</ul>
<div class="product-feature__stock">In stock · Ships in 24h</div>
<div class="product-feature__actions">
<span class="product-feature__price">$389</span>
<a href="/product/the-fighter-black-lightsaber-xenopixel-v3/" class="product-feature__cta">See The Fighter →</a>
</div>
</div>
</div>
<span class="product-feature__bloom" aria-hidden="true"></span>
</aside>
<div class="section-break" role="separator" aria-hidden="true"></div>
<h2>The Weight of a Hand Upon the Hilt</h2>
<!-- ~60% IMAGE PAIR — real ARTSABERS URLs -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<div class="image-pair">
<figure class="image-pair__figure">
<div class="image-pair__img-wrap">
<img class="image-pair__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg" alt="Carbon Strike hilt under warm workshop lighting" loading="lazy">
</div>
<figcaption class="image-pair__caption">Carbon Strike — the hilt he had not yet named.</figcaption>
</figure>
<figure class="image-pair__figure">
<div class="image-pair__img-wrap">
<img class="image-pair__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 hilt on a workshop bench" loading="lazy">
</div>
<figcaption class="image-pair__caption">Starkiller V3 — the hilt he had made for someone else.</figcaption>
</figure>
</div>
<p>He had spent an hour, perhaps two, sitting with the question. The lamp did not care. The felt did not care. The blade rested exactly where he had laid it, and the emitter angled away from him with the polite indifference of an object that has already decided and is waiting for the human in the room to catch up.</p>
<p>Elsewhere in the workshop, other hilts lay unfinished — the Carbon Strike he had not yet named, unengraved, its shroud still bare; the Starkiller he had begun in the spring for a duelist out of Naboo, whose deposit had cleared last week. They would be finished. They would be sent. The smith had no illusions about the trade. Sabers are not made by smiths who keep them; sabers are made by smiths who send them, and the difference is not romance, it is simply arithmetic. A workshop that keeps its work has, sooner rather than later, no work to keep.</p>
<p>And yet.</p>
<p>He reached, at last, for the hilt. His fingers found the choke without looking — the ridged carbon warmed already from the room, or from itself, and the pommel settled naturally against the fleshy heel of his palm. He had done this a thousand times. He had held every hilt he had ever built, briefly, in the final check before it went into its case. A saber cannot be shipped by a smith who has not held it. That was old lore in every workshop he had known.</p>
<p>But this holding was different. This holding was not the final check before a saber went into its case. This holding was — he understood now, in the way a person understands a thing they have refused for a long time to understand — a claiming. The smith closed his eyes. The workshop was very quiet. The blade, undignified, warm, patient, waited in his hand for the question the smith had spent a career refusing to ask himself.</p>
<p><em>Did he want to keep it?</em></p>
</div>
<!-- ~75% FULL-BLEED IMAGE BREAK — visual crescendo -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<figure class="image-fullbleed">
<div class="image-fullbleed__wrap">
<img class="image-fullbleed__img" src="https://camcom.dev/wp-content/uploads/2026/06/Dark-Katana-Kyber-Crystal-Lightsaber-11-600x600.jpg" alt="Dark Katana Kyber Crystal lightsaber, blade lit, atmospheric">
<div class="image-fullbleed__overlay"></div>
</div>
<figcaption class="image-fullbleed__caption">
<span class="image-fullbleed__caption-eyebrow">The Blade</span>
<span>The blade a Kyber crystal sings loudest through.</span>
</figcaption>
</figure>
<div class="article-body__inner">
<div class="section-break" role="separator" aria-hidden="true"></div>
<h2>The Myth You Do Not Wear — You Become</h2>
<p>The story we tell ourselves about sabers, in the trade and outside it, is a story about ownership. The saber belongs to the Jedi. The saber belongs to the duelist. The saber is a possession, a piece of kit, a purchase, a delivery — from forge floor to your door, as the guild across the trade lanes liked to say. And so it is. There is nothing dishonest in the transaction. Ten thousand hilts a year cross ten thousand doorsteps and are held by ten thousand hands that did not build them, and every one of those is a saber given a life.</p>
<p>But there is another story, older and quieter, and it is the story the smith had refused to speak aloud for the whole of his career. The saber is not, in the older story, a possession. The saber is a decision the wielder makes about the person the wielder intends to become. To take up a blade is to take up the myth that goes with the blade — the mask you wear, the code you inherit, the shape you begin to make with your body when your body knows there is a weight in its hand. The Jedi did not carry sabers because sabers were tools; the Jedi carried sabers because carrying was the act of becoming. The mask is not worn. The mask is grown into.</p>
<p>The smith, in the low light, was thinking of masks. He was thinking of the boy he had been at seventeen, in a rented room above a Corellian dockyard, with a whittled practice saber bought off a market stall and a smuggled holo of a Jedi Master pinned above the bunk. He was thinking of the man he had been at twenty-eight, when he had built his first proper hilt from milled parts and machined tolerances and had known, with the clarity of first work, that a saber was a lesser thing when kept and a greater thing when given. He had believed that then. He had built a whole life on it. He was no longer, tonight, certain it was true.</p>
<!-- ~85% ATTRIBUTED BLOCKQUOTE — verbatim -->
<a id="tf-pull-quote-2" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
<p class="article-blockquote__text">Every crystal wants something. This one wanted silence.</p>
<cite class="article-blockquote__cite">from The Fragments of Cassian</cite>
</blockquote>
<p>The blade lay in his hand. The felt was very warm. He thought, for a long time, that he would not switch it on — that he would set it back on the tray and close the workshop and send it, in the morning, to no one at all. He would keep it dark. He would keep it silent. He would keep it, because keeping a dark saber was not the same as keeping a lit one; keeping a lit one was a claim, and claims were what the smith had spent forty years refusing to make.</p>
<p>Then he thumbed the switch.</p>
<p>The blade came on with the small warm cough all blades come on with, and the workshop filled with a light the colour of the crystal's mind — not blue, not green, not the red of a duelist who had chosen his path; a colour older and quieter, the colour of a first sunrise seen from a workshop shutter that has not been opened for years. The smith held the blade steady. He watched the light lie against the carbon of the wall and the graphite of the choke and the small dust of the felt. He did not move for a long time. When he did move, he moved the blade, once, slowly, in the arc of the guard he had first learned to draw at seventeen. His shoulders remembered. His hands remembered. The blade remembered.</p>
<p>He had taken up the myth. He would learn to wear the mask. He would live, from tonight, the story he had built for other people to live.</p>
<p>He set the blade down, still lit. He watched the workshop breathe.</p>
<p class="article-signoff"><em>— Chloe</em></p>
</div>
</article>
<!-- ============================================================
ARTICLE FOOTER — tags + share + related + continue
============================================================ -->
<section class="article-footer">
<div class="article-footer__hairline"></div>
<div class="tag-row">
<span class="tag-row__label">Tags</span>
<a href="/blog/tag/short-story/" class="tag-chip">Short Story</a>
<a href="/blog/tag/kyber-crystals/" class="tag-chip">Kyber Crystals</a>
<a href="/blog/tag/the-workshop/" class="tag-chip">The Workshop</a>
<a href="/blog/tag/origin/" class="tag-chip">Origin</a>
<a href="/blog/tag/fiction/" class="tag-chip">Fiction</a>
</div>
<div class="share-row">
<span class="share-row__label">Share</span>
<a href="#" class="share-row__btn">X</a>
<a href="#" class="share-row__btn">Facebook</a>
<a href="#" class="share-row__btn">Reddit</a>
<a href="#" class="share-row__btn">Copy link</a>
</div>
</section>
<a id="tf-related-post-rail-1" data-tf-family="related-post-rail" style="display:contents"></a>
<section class="related-band">
<div class="related-band__inner">
<div class="related-band__eyebrow">More from the Blog</div>
<h2 class="related-band__title">Related Reading</h2>
<div class="related-grid">
<a class="related-card" href="/blog/forged-in-fire-and-beskar/">
<div class="related-card__media">
<img class="related-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="Mandalorian helmet, matte finish" loading="lazy">
</div>
<div class="related-card__body">
<span class="related-card__category">Lightsaber Guides & Tips</span>
<h3 class="related-card__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<span class="related-card__meta">8 min read</span>
</div>
</a>
<a class="related-card" href="/blog/order-delay-update-production-fulfilment/">
<div class="related-card__media">
<img class="related-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 Lightsaber" loading="lazy">
</div>
<div class="related-card__body">
<span class="related-card__category">ARTSABERS News</span>
<h3 class="related-card__title">Order Delay Update: Production & Fulfilment Status</h3>
<span class="related-card__meta">3 min read</span>
</div>
</a>
<a class="related-card" href="/blog/kyber-crystal-canon-legends/">
<div class="related-card__media">
<img class="related-card__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Maul-Double-Bladed-Lightsaber-SNV4-PRO-600x600.jpg" alt="Darth Maul double-bladed lightsaber" loading="lazy">
</div>
<div class="related-card__body">
<span class="related-card__category">Lore & Short Stories</span>
<h3 class="related-card__title">The Kyber Crystal: A Reader's Guide to Canon and Legends</h3>
<span class="related-card__meta">15 min read</span>
</div>
</a>
</div>
</div>
</section>
<!-- CONTINUE-THE-STORY BAND (LORE-ONLY) -->
<a id="tf-closing-cta-1" data-tf-family="closing-cta" style="display:contents"></a>
<a class="continue-band" href="/blog/kyber-crystal-canon-legends/">
<div class="continue-band__inner">
<div class="continue-band__left">
<div class="continue-band__eyebrow">Continue the story <span class="continue-band__arrow">→</span></div>
<h3 class="continue-band__title">The Kyber Crystal: A Reader's Guide to Canon and Legends</h3>
</div>
<div class="continue-band__right">
<span class="continue-band__chip">Lore & Short Stories</span>
<span class="continue-band__reading">15 min read</span>
</div>
</div>
</a>
<!-- ============================================================
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>