/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"?><?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"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — Editorial Content Spec</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@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* =========================================================================
TOKENS — ARTSABERS Kyber Hull (verbatim from styleguide)
========================================================================= */
:root {
/* Ember ombre — the ONE brand voice */
--ember-glow: #FFB347;
--ember-bright: #FF9540;
--ember: #FF7A2E;
--ember-forge: #E85D18;
--ember-deep: #D14810;
--ember-smoulder: #8B2E08;
--ember-scar: #5A1A00;
--on-primary-fixed:#2A0800;
--forge-red: #E63929; /* CAUTION callout only */
/* Hull ladder — surfaces */
--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;
--outline: #3E3E3E;
/* Chrome / white highlights */
--chrome-highlight: #FAFAFA;
--chrome-glint: #E8E4DD;
--chrome-warm: #F5F0E8;
--chrome-dim: #B8B0A6;
/* Surface semantics (roles, not hues) */
--bg-page: var(--charcoal);
--bg-hero: var(--carbon);
--bg-section: var(--charcoal);
--bg-section-alt: var(--charcoal-warm);
--bg-panel: var(--hull-panel);
--bg-panel-lift: var(--hull-panel-lift);
--bg-panel-dark: var(--hull-panel-dark);
--bg-footer: var(--carbon);
--text-body: var(--chrome-warm);
--text-heading: var(--chrome-highlight);
--text-muted: var(--chrome-dim);
--text-accent: var(--ember);
--text-on-ember: var(--on-primary-fixed);
/* Type */
--font-display: 'Orbitron', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
--fs-hero-full: 72px;
--fs-hero-compact: 48px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-h4: 20px;
--fs-body-lg: 20px;
--fs-body: 18px;
--fs-body-sm: 14px;
--fs-caption: 12px;
--fs-micro: 11px;
--fs-pull-lg: 40px;
--fs-pull-inline: 26px;
--fs-dropcap: 92px;
/* Elevation + effects */
--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-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);
--chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-hint: inset 0 1px 0 rgba(250,250,250,0.10);
--seam-ember: linear-gradient(90deg,
transparent 0%,
rgba(255,122,46,0.35) 20%,
rgba(255,179,71,0.85) 50%,
rgba(255,122,46,0.35) 80%,
transparent 100%);
}
/* =========================================================================
RESET + PAGE GROUND
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Panel-joint hairline pattern — reusable background pattern */
.pattern-joint-bg {
background-color: var(--charcoal);
background-image:
linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), rgba(255,122,46,0.05) 100%),
repeating-linear-gradient(180deg,
transparent 0px,
transparent 79px,
rgba(250,250,250,0.015) 79px,
rgba(250,250,250,0.015) 80px,
transparent 80px,
transparent 120px,
rgba(0,0,0,0.35) 120px,
rgba(0,0,0,0.35) 121px
);
}
/* Panel-seam glow separator — hairline + soft bleed */
.panel-seam {
position: relative;
height: 1px;
background: var(--seam-ember);
margin: 0;
}
.panel-seam::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 60px;
background: radial-gradient(ellipse at 50% 0%, rgba(255,122,46,0.28), transparent 65%);
pointer-events: none;
}
/* =========================================================================
BLOCK: page-nav — site header
========================================================================= */
.page-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(6,6,6,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(62,62,62,0.35);
padding: 18px 40px;
}
.page-nav__inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.page-nav__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.16em;
color: var(--chrome-highlight);
text-transform: uppercase;
}
.page-nav__brand-mark { color: var(--ember); }
.page-nav__links {
display: flex;
gap: 28px;
list-style: none;
padding: 0;
margin: 0;
}
.page-nav__link {
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--chrome-dim);
transition: color 0.2s;
}
.page-nav__link:hover { color: var(--chrome-highlight); }
.page-nav__link--active { color: var(--chrome-warm); }
.page-nav__cta {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ember);
text-transform: uppercase;
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.35);
}
@media (max-width: 768px) {
.page-nav { padding: 14px 20px; }
.page-nav__links { display: none; }
}
/* =========================================================================
BLOCK: spec-header — MAS52 pattern (dark carbon + ember bottom + glow)
========================================================================= */
.spec-header {
background: var(--carbon);
padding: 96px 40px 80px;
position: relative;
border-bottom: 2px solid var(--ember);
box-shadow:
0 24px 60px -20px rgba(255,122,46,0.55),
inset 0 -60px 60px -30px rgba(255,122,46,0.10);
}
.spec-header__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: end;
}
.spec-header__eyebrow {
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 32px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.spec-header__eyebrow::before {
content: "";
display: inline-block;
width: 40px;
height: 1px;
background: var(--ember);
}
.spec-header__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 68px;
line-height: 1.05;
color: var(--chrome-highlight);
margin: 0 0 24px;
letter-spacing: 0.8px;
max-width: 22ch;
}
.spec-header__lede {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 62ch;
margin: 0;
}
.spec-header__meta {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
text-align: right;
line-height: 1.8;
white-space: nowrap;
}
.spec-header__meta strong {
color: var(--chrome-warm);
font-weight: 500;
}
@media (max-width: 900px) {
.spec-header { padding: 64px 24px 56px; }
.spec-header__inner { grid-template-columns: 1fr; gap: 32px; }
.spec-header__title { font-size: 42px; letter-spacing: 0.8px; }
.spec-header__meta { text-align: left; white-space: normal; }
}
/* =========================================================================
BLOCK: worked-example — the wrapping frame that scopes each mini-article
========================================================================= */
.worked-example {
padding: 0;
background: var(--carbon);
}
.worked-example__scope {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
padding: 24px 40px 0;
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
.worked-example__scope::before {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background: var(--chrome-dim);
}
.worked-example__scope-num { color: var(--ember); }
/* =========================================================================
BLOCK: article-hero-compact — panel-joint background hero (announcement + guides)
========================================================================= */
.article-hero-compact {
background: var(--carbon);
position: relative;
padding: 88px 40px 72px;
overflow: hidden;
border-top: 1px solid rgba(250,250,250,0.05);
}
.article-hero-compact--taller { padding-top: 112px; padding-bottom: 88px; }
.article-hero-compact::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg,
transparent 0px,
transparent 240px,
rgba(250,250,250,0.02) 240px,
rgba(250,250,250,0.02) 241px,
transparent 242px,
transparent 480px),
repeating-linear-gradient(0deg,
transparent 0px,
transparent 160px,
rgba(255,122,46,0.03) 160px,
rgba(255,122,46,0.03) 161px,
transparent 162px,
transparent 320px);
pointer-events: none;
}
.article-hero-compact::after {
content: "";
position: absolute;
right: -100px;
top: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle at center, rgba(255,122,46,0.12), transparent 60%);
pointer-events: none;
}
.article-hero-compact__inner {
max-width: 1180px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.article-hero-compact__chip { margin-bottom: 28px; }
.article-hero-compact__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 48px;
line-height: 1.1;
color: var(--chrome-highlight);
letter-spacing: 0.8px;
margin: 0 0 20px;
max-width: 24ch;
}
.article-hero-compact__subtitle {
font-family: var(--font-body);
font-size: 20px;
line-height: 1.55;
color: var(--chrome-warm);
font-weight: 400;
margin: 0 0 40px;
max-width: 60ch;
}
.article-hero-compact__byline { margin-top: 32px; }
@media (max-width: 768px) {
.article-hero-compact { padding: 56px 20px 48px; }
.article-hero-compact__title { font-size: 32px; letter-spacing: 0.8px; }
.article-hero-compact__subtitle { font-size: 17px; }
}
/* =========================================================================
BLOCK: article-hero-fullbleed — full-bleed atmospheric hero
========================================================================= */
.article-hero-fullbleed {
position: relative;
height: 700px;
overflow: hidden;
background: var(--carbon);
}
.article-hero-fullbleed__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: contrast(1.05) saturate(0.92);
}
.article-hero-fullbleed__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(6,6,6,0.62) 0%,
rgba(6,6,6,0.30) 35%,
rgba(6,6,6,0.72) 70%,
rgba(6,6,6,0.88) 100%);
pointer-events: none;
}
.article-hero-fullbleed__bloom {
position: absolute;
right: -180px;
bottom: -140px;
width: 620px;
height: 620px;
background: radial-gradient(circle at center, rgba(255,122,46,0.35), transparent 60%);
pointer-events: none;
mix-blend-mode: screen;
}
.article-hero-fullbleed__inner {
position: relative;
z-index: 2;
max-width: 1180px;
margin: 0 auto;
padding: 0 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 96px;
}
.article-hero-fullbleed__chip { margin-bottom: 28px; }
.article-hero-fullbleed__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 72px;
line-height: 1.05;
color: var(--chrome-highlight);
margin: 0 0 22px;
max-width: 18ch;
letter-spacing: 0.8px;
text-shadow: 0 4px 24px rgba(0,0,0,0.8);
}
.article-hero-fullbleed__subtitle {
font-family: var(--font-body);
font-size: 20px;
line-height: 1.55;
color: var(--chrome-warm);
font-weight: 400;
margin: 0;
max-width: 52ch;
text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
@media (max-width: 768px) {
.article-hero-fullbleed { height: 560px; }
.article-hero-fullbleed__inner { padding: 0 20px 56px; }
.article-hero-fullbleed__title { font-size: 40px; letter-spacing: 0.8px; }
.article-hero-fullbleed__subtitle { font-size: 17px; }
}
/* =========================================================================
BLOCK: category-chip — ember-hairline uppercase chip
========================================================================= */
.category-chip {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(255,122,46,0.06);
white-space: nowrap;
}
.category-chip::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
/* =========================================================================
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);
}
/* =========================================================================
BLOCK: article-body — reading surface w/ 68ch max-width + typography
========================================================================= */
.article-body {
background: var(--charcoal);
padding: 88px 40px 96px;
position: relative;
}
.article-body__inner {
max-width: 68ch;
margin: 0 auto;
}
.article-body p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--chrome-warm);
margin: 0 0 1.6em;
}
.article-body p.lead {
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--chrome-warm);
}
.article-body h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.2;
color: var(--chrome-highlight);
letter-spacing: -0.005em;
margin: 2em 0 0.7em;
}
.article-body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h3);
line-height: 1.25;
color: var(--chrome-highlight);
margin: 1.6em 0 0.6em;
}
.article-body h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h4);
line-height: 1.3;
color: var(--chrome-highlight);
margin: 1.4em 0 0.5em;
}
.article-body em { color: var(--chrome-glint); font-style: italic; }
.article-body strong { color: var(--chrome-highlight); font-weight: 600; }
.article-body__signoff {
font-family: var(--font-body);
font-size: 16px;
color: var(--chrome-dim);
margin: 2.4em 0 0;
padding-top: 24px;
border-top: 1px solid rgba(184,176,166,0.15);
font-style: italic;
}
@media (max-width: 768px) {
.article-body { padding: 56px 24px 64px; }
.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 22px; }
.article-body p { font-size: 17px; }
}
/* =========================================================================
BLOCK: drop-cap — first letter Space Grotesk display, ember, 5 lines tall
========================================================================= */
.drop-cap::first-letter {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-dropcap);
line-height: 0.9;
color: var(--ember);
float: left;
padding: 6px 14px 0 0;
margin: 0;
letter-spacing: -0.02em;
text-shadow: 0 0 20px rgba(255,122,46,0.35);
}
/* =========================================================================
BLOCK: section-break — ember hairline between body sections
========================================================================= */
.section-break {
border: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,122,46,0.55) 30%,
rgba(255,122,46,0.55) 70%,
transparent 100%);
margin: 56px 0;
position: relative;
}
.section-break--dots {
background: none;
text-align: center;
height: auto;
}
.section-break--dots::after {
content: "· · ·";
font-family: var(--font-display);
color: var(--ember);
letter-spacing: 0.8em;
font-size: 22px;
}
/* =========================================================================
BLOCK: callout-box — ember-bordered card w/ icon chip + eyebrow + body
========================================================================= */
.callout-box {
margin: 40px 0;
padding: 32px 32px 30px;
background: rgba(255,122,46,0.05);
border: 1px solid rgba(255,122,46,0.45);
position: relative;
box-shadow: inset 0 1px 0 rgba(255,122,46,0.25), 0 0 24px -8px rgba(255,122,46,0.35);
}
.callout-box--caution .callout-box__icon { border-color: var(--forge-red); color: var(--forge-red); box-shadow: 0 0 16px rgba(230,57,41,0.4); }
.callout-box--caution .callout-box__eyebrow { color: var(--forge-red); }
/* =========================================================================
BLOCK: pull-quote-large — full-width, ember hairlines top+bottom
========================================================================= */
.pull-quote-large {
margin: 64px 0;
padding: 44px 20px;
text-align: center;
border-top: 1px solid rgba(255,122,46,0.55);
border-bottom: 1px solid rgba(255,122,46,0.55);
position: relative;
}
.pull-quote-large::before,
.pull-quote-large::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 40px;
pointer-events: none;
}
.pull-quote-large::before {
top: 0;
background: linear-gradient(180deg, rgba(255,122,46,0.10), transparent);
}
.pull-quote-large::after {
bottom: 0;
background: linear-gradient(0deg, rgba(255,122,46,0.10), transparent);
}
@media (max-width: 768px) {
.pull-quote-large__text { font-size: 28px; }
}
/* =========================================================================
BLOCK: pull-quote-inline — half-width, side-pulled variant
========================================================================= */
.pull-quote-inline {
float: right;
width: 46%;
margin: 14px 0 24px 32px;
padding: 6px 0 6px 22px;
border-left: 2px solid var(--ember);
}
@media (max-width: 768px) {
.pull-quote-inline { float: none; width: 100%; margin: 24px 0; }
.pull-quote-inline__text { font-size: 22px; }
}
/* =========================================================================
BLOCK: attributed-quote — blockquote with left indent + ember rail
========================================================================= */
.attributed-quote {
margin: 40px 0;
padding: 8px 0 8px 24px;
border-left: 2px solid var(--ember);
}
.attributed-quote__attr::before {
content: "— ";
color: var(--ember);
}
/* =========================================================================
BLOCK: inline-image — image at body width + caption
========================================================================= */
.inline-image {
margin: 48px 0;
}
.inline-image__frame {
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
}
.inline-image__img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
}
.inline-image__caption {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: 14px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.5;
}
.inline-image__fig {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
white-space: nowrap;
}
/* =========================================================================
BLOCK: image-pair — two images side-by-side, one caption each
========================================================================= */
.image-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 48px 0;
}
.image-pair__cell { display: flex; flex-direction: column; }
.image-pair__frame {
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
}
.image-pair__img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
}
.image-pair__caption {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 12px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
line-height: 1.5;
}
.image-pair__fig {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
white-space: nowrap;
}
@media (max-width: 640px) {
.image-pair { grid-template-columns: 1fr; gap: 32px; }
}
/* =========================================================================
BLOCK: full-bleed-image — 100vw break-out image
========================================================================= */
.full-bleed-image {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 40px 0 0;
border-top: 1px solid rgba(255,122,46,0.40);
border-bottom: 1px solid rgba(255,122,46,0.40);
margin-top: 64px;
margin-bottom: 64px;
background: var(--carbon);
}
.full-bleed-image__img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.full-bleed-image__caption {
max-width: 68ch;
margin: 16px auto 40px;
padding: 0 40px;
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
display: flex;
gap: 12px;
align-items: baseline;
}
.full-bleed-image__fig {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
white-space: nowrap;
}
@media (max-width: 768px) {
.full-bleed-image__img { height: 300px; }
}
/* =========================================================================
BLOCK: ember-list — bulleted + numbered variants w/ ember markers
========================================================================= */
.ember-list {
list-style: none;
padding: 0;
margin: 32px 0;
counter-reset: item;
}
.ember-list__item {
position: relative;
padding-left: 44px;
margin-bottom: 22px;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--chrome-warm);
}
.ember-list--bullet .ember-list__item::before {
content: "";
position: absolute;
left: 8px;
top: 12px;
width: 8px;
height: 8px;
background: var(--ember);
box-shadow: 0 0 8px rgba(255,122,46,0.6);
}
.ember-list--number { counter-reset: emitem; }
.ember-list--number .ember-list__item {
counter-increment: emitem;
padding-left: 56px;
}
.ember-list--number .ember-list__item::before {
content: counter(emitem, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.14em;
color: var(--ember);
}
.ember-list__lead {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 17px;
letter-spacing: 0.02em;
color: var(--chrome-highlight);
margin-bottom: 4px;
}
/* =========================================================================
BLOCK: article-footer — hairline + tag row + share row wrapper
========================================================================= */
.article-footer {
background: var(--charcoal);
padding: 0 40px 64px;
}
.article-footer__inner {
max-width: 68ch;
margin: 0 auto;
padding-top: 40px;
border-top: 1px solid rgba(184,176,166,0.15);
}
@media (max-width: 768px) {
.article-footer { padding: 0 24px 48px; }
}
/* =========================================================================
BLOCK: tag-chip-row — 4-6 uppercase Manrope small tag chips
========================================================================= */
.tag-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 36px;
}
.tag-chip-row__label {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--chrome-dim);
padding: 8px 0;
margin-right: 6px;
}
.tag-chip-row__chip {
font-family: var(--font-body);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--chrome-warm);
padding: 7px 12px;
border: 1px solid rgba(255,122,46,0.35);
background: transparent;
transition: border-color 0.2s, background 0.2s;
}
.tag-chip-row__chip:hover {
border-color: var(--ember);
background: rgba(255,122,46,0.06);
}
/* =========================================================================
BLOCK: share-row — X · Facebook · Reddit · Copy link (icon-only desktop)
========================================================================= */
.share-row {
display: flex;
align-items: center;
gap: 16px;
padding-top: 28px;
border-top: 1px solid rgba(184,176,166,0.10);
}
.share-row__label {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--chrome-dim);
margin-right: 8px;
}
.share-row__btn {
width: 40px;
height: 40px;
background: transparent;
border: 1px solid rgba(62,62,62,0.6);
color: var(--chrome-dim);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.share-row__btn:hover {
color: var(--ember);
border-color: var(--ember);
background: rgba(255,122,46,0.05);
box-shadow: var(--ember-glow-sm);
}
.share-row__btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* =========================================================================
BLOCK: related-articles — 3-up card with ember-hairline separators
========================================================================= */
.related-articles {
background: var(--charcoal-warm);
padding: 72px 40px 80px;
border-top: 1px solid rgba(255,122,46,0.20);
position: relative;
}
.related-articles__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--ember);
}
.related-articles__card:first-child { padding-left: 0; }
.related-articles__card:last-child { padding-right: 0; border-right: 0; }
.related-articles__card:hover .related-articles__img { transform: scale(1.03); }
@media (max-width: 900px) {
.related-articles__grid { grid-template-columns: 1fr; gap: 40px; }
.related-articles__card { padding: 0; border-right: 0; border-bottom: 1px solid rgba(184,176,166,0.12); padding-bottom: 40px; }
.related-articles__card:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* =========================================================================
BLOCK: continue-band — subtle "Continue the story →" bottom band
========================================================================= */
.continue-band {
background: var(--carbon);
padding: 40px 40px;
border-top: 1px solid rgba(255,122,46,0.30);
position: relative;
}
.continue-band::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 40px;
background: linear-gradient(180deg, rgba(255,122,46,0.10), transparent);
pointer-events: none;
}
.continue-band__inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.continue-band__eyebrow {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 8px;
}
.continue-band__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.25;
color: var(--chrome-warm);
margin: 0; letter-spacing: 0.8px; }
.continue-band__cta {
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
padding: 14px 22px;
border: 1px solid var(--ember);
transition: background 0.2s, box-shadow 0.2s;
display: inline-flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.continue-band__cta:hover {
background: rgba(255,122,46,0.08);
box-shadow: var(--ember-glow-sm);
}
@media (max-width: 768px) {
.continue-band__inner { flex-direction: column; align-items: flex-start; }
}
/* =========================================================================
BLOCK: appendix-section — the patterns appendix wrapper
========================================================================= */
.appendix-section {
background: var(--charcoal-warm);
padding: 120px 40px 120px;
position: relative;
background-image:
repeating-linear-gradient(180deg,
transparent 0px,
transparent 119px,
rgba(250,250,250,0.02) 119px,
rgba(250,250,250,0.02) 120px);
}
.appendix-section__inner {
max-width: 1180px;
margin: 0 auto;
}
.appendix-section__eyebrow {
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 24px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.appendix-section__eyebrow::before {
content: "";
display: inline-block;
width: 40px;
height: 1px;
background: var(--ember);
}
.appendix-section__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 48px;
line-height: 1.1;
color: var(--chrome-highlight);
margin: 0 0 20px;
letter-spacing: 0.8px;
max-width: 22ch;
}
.appendix-section__lede {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 60ch;
margin: 0 0 72px;
}
/* =========================================================================
BLOCK: pattern-panel — fieldset border panel (MAS52 pattern)
========================================================================= */
.pattern-panel {
margin: 0 0 48px;
border: 1px solid rgba(184,176,166,0.20);
padding: 40px 40px 44px;
position: relative;
background: rgba(20,20,20,0.6);
}
.pattern-panel__legend {
position: absolute;
top: -12px;
left: 32px;
padding: 0 14px;
background: var(--charcoal-warm);
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ember);
display: inline-flex;
align-items: center;
gap: 8px;
}
.pattern-panel__legend-num {
color: var(--chrome-dim);
}
.pattern-panel__lede {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
margin: 4px 0 32px;
max-width: 60ch;
}
.pattern-panel__demo {
padding: 8px 0 0;
}
.pattern-panel__grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
@media (max-width: 768px) {
.pattern-panel { padding: 32px 24px; }
.pattern-panel__grid-2 { grid-template-columns: 1fr; }
}
/* =========================================================================
BLOCK: type-scale — annotated typography ladder
========================================================================= */
.type-scale { display: flex; flex-direction: column; gap: 40px; }
.type-scale__row {
display: grid;
grid-template-columns: 1fr 200px;
gap: 40px;
align-items: baseline;
padding-bottom: 20px;
border-bottom: 1px solid rgba(184,176,166,0.10);
}
.type-scale__sample { color: var(--chrome-warm); margin: 0; }
.type-scale__note {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--chrome-dim);
text-align: right;
line-height: 1.6;
}
.type-scale__note strong { color: var(--ember); font-weight: 500; }
.type-scale__sample--hero-full { font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; color: var(--chrome-highlight); }
.type-scale__sample--hero-compact { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero-compact); line-height: 1.1; color: var(--chrome-highlight); }
.type-scale__sample--h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.2; color: var(--chrome-highlight); }
.type-scale__sample--h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; color: var(--chrome-highlight); }
.type-scale__sample--h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--chrome-highlight); }
.type-scale__sample--body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--chrome-warm); }
.type-scale__sample--body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.65; color: var(--chrome-warm); }
.type-scale__sample--body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--chrome-warm); }
@media (max-width: 768px) {
.type-scale__row { grid-template-columns: 1fr; }
.type-scale__note { text-align: left; }
.type-scale__sample--hero-full { font-size: 40px; }
}
/* =========================================================================
BLOCK: page-footer — carbon ground, minimal, HUD-style
========================================================================= */
.page-footer {
background: var(--carbon);
padding: 64px 40px 40px;
color: var(--chrome-dim);
position: relative;
}
.page-footer__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(184,176,166,0.10);
}
.page-footer__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.16em;
color: var(--chrome-highlight);
text-transform: uppercase;
margin: 0 0 16px;
}
.page-footer__brand-mark { color: var(--ember); }
.page-footer__tagline {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--chrome-dim);
max-width: 34ch;
margin: 0;
}
.page-footer__col-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 20px;
}
.page-footer__list { list-style: none; padding: 0; margin: 0; }
.page-footer__link {
display: block;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
padding: 5px 0;
transition: color 0.2s;
}
.page-footer__link:hover { color: var(--chrome-warm); }
.page-footer__base {
max-width: 1180px;
margin: 32px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--chrome-dim);
}
@media (max-width: 768px) {
.page-footer__inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
.page-footer__base { flex-direction: column; gap: 12px; }
}
/* 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 13184:tf-author-byline-1 -- */
/* =====================================================================
BLOCK: byline-editorial — category chip + tag chips + byline row
(rebuild of MAS66's clobbered author-byline, editorial magazine shape)
===================================================================== */
.byline-editorial {
background: var(--charcoal);
padding: 40px 32px 32px;
box-shadow: var(--chrome-top-soft);
border-bottom: 1px solid rgba(184,176,166,0.15);
}
.byline-editorial__chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.byline-editorial__category {
display: inline-block;
padding: 6px 14px;
background: rgba(255,122,46,0.14);
border: 1px solid rgba(255,122,46,0.42);
color: var(--ember-glow);
font-family: var(--font-chrome);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.byline-editorial__category:hover {
background: rgba(255,122,46,0.22);
border-color: rgba(255,122,46,0.6);
}
.byline-editorial__tag {
display: inline-block;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--hull-edge);
color: var(--chrome-dim);
font-family: var(--font-chrome);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.byline-editorial__tag:hover {
color: var(--chrome-warm);
border-color: var(--chrome-dim);
}
.byline-editorial__row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-family: var(--font-body);
font-size: 14px;
color: var(--chrome-dim);
}
.byline-editorial__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: 600;
color: var(--ember-glow);
letter-spacing: 0.02em;
}
.byline-editorial__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--chrome-warm);
letter-spacing: 0.02em;
}
.byline-editorial__sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--hull-edge);
}
.byline-editorial__meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
}
/* -- Reconciled from family 14249 canonical 13173:tf-byline-row-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);
}
/* -- Reconciled from family 14028 canonical 13173:tf-related-post-rail-1 -- */
/* =========================================================================
BLOCK: category-chip — ember-hairline uppercase chip
========================================================================= */
.category-chip {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
padding: 8px 14px;
border: 1px solid rgba(255,122,46,0.55);
background: rgba(255,122,46,0.06);
white-space: nowrap;
}
.category-chip::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
background: var(--ember);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255,122,46,0.9);
}
/* =========================================================================
BLOCK: related-articles — 3-up card with ember-hairline separators
========================================================================= */
.related-articles {
background: var(--charcoal-warm);
padding: 72px 40px 80px;
border-top: 1px solid rgba(255,122,46,0.20);
position: relative;
}
.related-articles__inner {
max-width: 1180px;
margin: 0 auto;
}
.related-articles__eyebrow {
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 40px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.related-articles__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--ember);
}
.related-articles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.related-articles__card {
padding: 0 32px;
border-right: 1px solid rgba(184,176,166,0.12);
display: flex;
flex-direction: column;
}
.related-articles__card:first-child { padding-left: 0; }
.related-articles__card:last-child { padding-right: 0; border-right: 0; }
.related-articles__frame {
background: var(--hull-panel-dark);
box-shadow: var(--panel-lift);
margin-bottom: 20px;
overflow: hidden;
}
.related-articles__img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
transition: transform 0.4s ease-out;
}
.related-articles__card:hover .related-articles__img { transform: scale(1.03); }
.related-articles__chip { margin-bottom: 14px; }
.related-articles__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
color: var(--chrome-highlight);
margin: 0 0 14px;
letter-spacing: 0.8px;
}
.related-articles__meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--chrome-dim);
margin-top: auto;
display: flex;
align-items: center;
gap: 10px;
}
.related-articles__meta-sep {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--chrome-dim);
opacity: 0.55;
}
@media (max-width: 900px) {
.related-articles__grid { grid-template-columns: 1fr; gap: 40px; }
.related-articles__card { padding: 0; border-right: 0; border-bottom: 1px solid rgba(184,176,166,0.12); padding-bottom: 40px; }
.related-articles__card:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* -- 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;
}
/* -- Reconciled from family 14037 canonical 13173:tf-other-1 -- */
/* =========================================================================
BLOCK: callout-box — ember-bordered card w/ icon chip + eyebrow + body
========================================================================= */
.callout-box {
margin: 40px 0;
padding: 32px 32px 30px;
background: rgba(255,122,46,0.05);
border: 1px solid rgba(255,122,46,0.45);
position: relative;
box-shadow: inset 0 1px 0 rgba(255,122,46,0.25), 0 0 24px -8px rgba(255,122,46,0.35);
}
.callout-box__icon {
position: absolute;
top: -14px;
left: 24px;
width: 28px;
height: 28px;
background: var(--carbon);
border: 1px solid var(--ember);
display: flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
box-shadow: var(--ember-glow-sm);
}
.callout-box__eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ember);
margin: 0 0 12px;
}
.callout-box__body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--chrome-warm);
margin: 0;
}
.callout-box--caution {
background: rgba(230,57,41,0.04);
border-color: rgba(230,57,41,0.5);
box-shadow: inset 0 1px 0 rgba(230,57,41,0.3), 0 0 24px -8px rgba(230,57,41,0.4);
}
.callout-box--caution .callout-box__icon { border-color: var(--forge-red); color: var(--forge-red); box-shadow: 0 0 16px rgba(230,57,41,0.4); }
.callout-box--caution .callout-box__eyebrow { color: var(--forge-red); }
</style>
</head>
<body>
<!-- =====================================================================
SITE NAV — chrome context so worked examples read as real pages
===================================================================== -->
<nav class="page-nav">
<div class="page-nav__inner">
<div class="page-nav__brand">ART<span class="page-nav__brand-mark">SABERS</span></div>
<ul class="page-nav__links">
<li><a href="#" class="page-nav__link">Lightsabers</a></li>
<li><a href="#" class="page-nav__link">Helmets</a></li>
<li><a href="#" class="page-nav__link">Parts & Accessories</a></li>
<li><a href="#" class="page-nav__link page-nav__link--active">Blog</a></li>
<li><a href="#" class="page-nav__link">Support</a></li>
</ul>
<a href="#" class="page-nav__cta">Shop</a>
</div>
</nav>
<!-- =====================================================================
1. SPEC HEADER — MAS52 pattern verbatim
===================================================================== -->
<header class="spec-header">
<div class="spec-header__inner">
<div>
<p class="spec-header__eyebrow">EDITORIAL PATTERNS · v1.0</p>
<h1 class="spec-header__title">The reading-surface pattern library.</h1>
<p class="spec-header__lede">Every ARTSABERS blog article inherits from this spec. Two body-density modes — announcement and long-form — share the same DOM. Every pattern below composes freely.</p>
</div>
<div class="spec-header__meta">
Ref MAS?? · Kyber Hull <strong>v4.2.1</strong><br>
Manrope + Space Grotesk<br>
Drafted 10 Jul 2026
</div>
</div>
</header>
<!-- =====================================================================
2. WORKED EXAMPLE — ANNOUNCEMENT MODE
Order Delay Update: Production & Fulfilment Status
===================================================================== -->
<section class="worked-example">
<p class="worked-example__scope"><span class="worked-example__scope-num">01</span> Worked example — Announcement mode</p>
<a id="tf-hero-editorial-1" data-tf-family="hero-editorial" style="display:contents"></a>
<div class="article-hero-compact">
<div class="article-hero-compact__inner">
<div class="article-hero-compact__chip">
<span class="category-chip">ARTSABERS News</span>
</div>
<h1 class="article-hero-compact__title">Order Delay Update: Production & Fulfilment Status</h1>
<p class="article-hero-compact__subtitle">A candid update on where your order sits and when you'll hear from us next.</p>
<div class="article-hero-compact__byline">
<a id="tf-byline-row-1" data-tf-family="byline-row" style="display:contents"></a>
<div class="byline-row">
<div class="byline-row__avatar">C</div>
<span class="byline-row__name">Chloe</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">8 Jul 2026</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">3 min read</span>
</div>
</div>
</div>
</div>
<article class="article-body">
<div class="article-body__inner">
<p class="lead drop-cap">If you're waiting on a saber right now, here's exactly where we stand — no PR spin, no vague "shipping soon" line, just the state of the workshop as of this morning. We'd rather over-explain than leave you refreshing a tracking page.</p>
<h2>Where we are right now</h2>
<p>Production on our Xenopixel V3 and SNV4 PRO Cores is running roughly four working days behind our usual 7-10 day window. The bottleneck is a specific pixel-strip batch that arrived out of spec at the factory — rather than ship blades that would fail your first duel, we've held the line and requested a re-run. Every affected order has been logged; nothing is lost, and your place in the queue is unchanged.</p>
<p>Baselit Cores (S-RGB and RGB-X) and all helmets are unaffected. If your order contains only those items, you'll see it moving inside the usual window.</p>
<h2>What happens next</h2>
<p>Replacement strips are already at the workshop as of Monday. QC finishes Friday. From there, affected orders ship inside a rolling 72-hour window in the order they were placed. Every affected customer will receive a personal email with their tracking number the day their saber leaves the bench — not a generic bulk notification.</p>
<p>If you'd rather switch your Core tier, cancel outright, or split a multi-item order to ship what's ready now, reply to your order confirmation email. Your named support contact will handle it inside 24 hours. We're not going to make you jump through a ticket queue for that.</p>
<p class="article-body__signoff">Signed, Matthew (ARTSABERS)</p>
</div>
</article>
<div class="article-footer">
<div class="article-footer__inner">
<div class="tag-chip-row">
<span class="tag-chip-row__label">Tags</span>
<a href="#" class="tag-chip-row__chip">News</a>
<a href="#" class="tag-chip-row__chip">Fulfilment</a>
<a href="#" class="tag-chip-row__chip">Xenopixel V3</a>
<a href="#" class="tag-chip-row__chip">SNV4 Pro</a>
<a href="#" class="tag-chip-row__chip">Customer Service</a>
</div>
<div class="share-row">
<span class="share-row__label">Share</span>
<button class="share-row__btn" aria-label="Share on X">
<svg viewbox="0 0 24 24"><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"></path></svg>
</button>
<button class="share-row__btn" aria-label="Share on Facebook">
<svg viewbox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 011.141.195v3.325a8.623 8.623 0 00-.653-.036 26.805 26.805 0 00-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 00-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647z"></path></svg>
</button>
<button class="share-row__btn" aria-label="Share on Reddit">
<svg viewbox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 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 12c0-.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"></path></svg>
</button>
<button class="share-row__btn" aria-label="Copy link">
<svg viewbox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
</button>
</div>
</div>
</div>
<a id="tf-related-post-rail-1" data-tf-family="related-post-rail" style="display:contents"></a>
<div class="related-articles">
<div class="related-articles__inner">
<p class="related-articles__eyebrow">More from the blog</p>
<div class="related-articles__grid">
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lore & Short Stories</span></div>
<h3 class="related-articles__title">Claim the Blade. Wear the Mask. Live the Myth.</h3>
<div class="related-articles__meta">
<span>3 May 2026</span>
<span class="related-articles__meta-sep"></span>
<span>12 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lightsaber Guides & Tips</span></div>
<h3 class="related-articles__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<div class="related-articles__meta">
<span>12 Jun 2026</span>
<span class="related-articles__meta-sep"></span>
<span>8 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">ARTSABERS News</span></div>
<h3 class="related-articles__title">Black Friday 2025: Every Deal in One Place</h3>
<div class="related-articles__meta">
<span>21 Nov 2025</span>
<span class="related-articles__meta-sep"></span>
<span>4 min read</span>
</div>
</a>
</div>
</div>
</div>
</section>
<div class="panel-seam" role="presentation"></div>
<!-- =====================================================================
3. WORKED EXAMPLE — LONG-FORM GUIDES & TIPS
Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet
===================================================================== -->
<section class="worked-example">
<p class="worked-example__scope"><span class="worked-example__scope-num">02</span> Worked example — Long-form editorial (Guides & Tips)</p>
<a id="tf-hero-editorial-2" data-tf-family="hero-editorial" style="display:contents"></a>
<div class="article-hero-compact article-hero-compact--taller">
<div class="article-hero-compact__inner">
<div class="article-hero-compact__chip">
<span class="category-chip">Lightsaber Guides & Tips</span>
</div>
<h1 class="article-hero-compact__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h1>
<p class="article-hero-compact__subtitle">The blade tells one side of the story. The helmet tells the other. Here's why the pair is more than the sum of its parts.</p>
<div class="article-hero-compact__byline">
<a id="tf-byline-row-2" data-tf-family="byline-row" style="display:contents"></a>
<div class="byline-row">
<div class="byline-row__avatar">C</div>
<span class="byline-row__name">Chloe</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">8 Jul 2026</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">3 min read</span>
</div>
</div>
</div>
</div>
<article class="article-body">
<div class="article-body__inner">
<p class="lead drop-cap">Every collector reaches the same moment. The blade is on the wall, the stand is level, and something still feels unfinished. The saber alone works — it hums, it glows, it draws every eye in the room — but the room is only ever half the character. That gap between owning the weapon and inhabiting the myth is what a helmet closes.</p>
<h2>The blade alone</h2>
<p>A saber on a stand is a declaration. It says <em>this piece is worth displaying</em>, and it usually looks phenomenal on its own — cinematic lighting, subtle idle hum, blade-colour drift you can watch for hours. For a lot of collectors, that's exactly enough. The saber is the artefact; the display is the story.</p>
<p>The moment the pose stops working, though, is the moment you pick it up. In-hand, in the mirror, at a con, in a photo — the saber becomes half of a costume, and half of a costume reads as a prop. Nothing wrong with that, but it's a different intent from the fully realised character you probably had in your head when you clicked buy.</p>
<hr class="section-break">
<h2>The helmet alone</h2>
<p>A helmet does the opposite job. It carries the silhouette, the visor cut, the ear-cone flare — the immediate visual shorthand that tells the room which side of the galaxy you're on. On a shelf it reads as a bust; on the head it reads as identity. A helmet is the character's face when the character has chosen not to have one.</p>
<p>What a helmet won't do on its own is settle the question of readiness. Without a weapon in hand, a Mandalorian in full beskar reads as neutral — armoured, watchful, not yet committed. That reading is deliberate for some builds. For a duelling collector, it's a wall the pose keeps hitting.</p>
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<div class="callout-box">
<div class="callout-box__icon">i</div>
<p class="callout-box__eyebrow">Key takeaway</p>
<p class="callout-box__body">A helmet turns a saber from a solo prop into a costume. Costume-ready shifts your collection from displayable to wearable — and that shift is where fans stop being spectators and start being characters.</p>
</div>
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<div class="image-pair">
<div class="image-pair__cell">
<div class="image-pair__frame">
<img class="image-pair__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="Apprentice Black Duelling Lightsaber — RGB-X Core">
</div>
<div class="image-pair__caption">
<span class="image-pair__fig">Fig. 1</span>
<span>Apprentice Black Duelling — RGB-X Core. Heavy-duel blade, matte hilt.</span>
</div>
</div>
<div class="image-pair__cell">
<div class="image-pair__frame">
<img class="image-pair__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="Mandalorian Helmet">
</div>
<div class="image-pair__caption">
<span class="image-pair__fig">Fig. 2</span>
<span>Mandalorian Helmet. Beskar-inspired T-visor, wearable-scale.</span>
</div>
</div>
</div>
<hr class="section-break">
<h2>Why the pair works</h2>
<p>Blade and mask are the two halves of the same declaration: <em>this is who I am, and this is what I carry.</em> One without the other is a fragment. Together they resolve into a whole silhouette — the outline you'd recognise from across a hall, in low light, in a still frame. That silhouette is what fans respond to, and it's what makes the collection feel <em>lived-in</em> rather than <em>displayed</em>.</p>
<p>There's a practical side too. A helmet extends how you can enjoy the saber. Con day, photoshoot, backyard duel, video reel — every one of those needs both hands full and a face committed. The pair unlocks contexts the saber alone can't reach.</p>
<h2>Three pairings we love</h2>
<ol class="ember-list ember-list--number">
<li class="ember-list__item">
<span class="ember-list__lead">Beskar mask + heavy-duel blade</span>
Mandalorian Helmet paired with the Apprentice Black Duelling in RGB-X. The most versatile combination on the site — reads as bounty hunter, reads as duellist, reads as neutral watcher depending on the pose.
</li>
<li class="ember-list__item">
<span class="ember-list__lead">Death Trooper visor + Xenopixel V3</span>
Imperial elite silhouette. Death Trooper Helmet plus a Xenopixel V3 blade for the depth of colour a matte-black armour set demands. This is the con-photo build.
</li>
<li class="ember-list__item">
<span class="ember-list__lead">Armorer's forge-mask + SNV4 Pro Darksaber</span>
Mandalorian Armorer Helmet paired with a SNV4 Pro Darth Maul double-bladed for the collectors reaching for lore rather than film accuracy. The rarest silhouette we stock.
</li>
</ol>
<hr class="section-break">
<h2>The upshot</h2>
<p>You do not need a helmet to enjoy your saber. Plenty of collectors will never wear either. But if you've ever taken the blade off the stand, held it in the mirror, and felt that quiet gap where the character should be — a helmet is what closes it. Not decoration. Not upsell. Completion.</p>
<p class="article-body__signoff">May the force be with you both.</p>
</div>
</article>
<div class="article-footer">
<div class="article-footer__inner">
<div class="tag-chip-row">
<span class="tag-chip-row__label">Tags</span>
<a href="#" class="tag-chip-row__chip">Guides</a>
<a href="#" class="tag-chip-row__chip">Helmets</a>
<a href="#" class="tag-chip-row__chip">Cosplay</a>
<a href="#" class="tag-chip-row__chip">Mandalorian</a>
<a href="#" class="tag-chip-row__chip">Bundling</a>
<a href="#" class="tag-chip-row__chip">Duelling</a>
</div>
<div class="share-row">
<span class="share-row__label">Share</span>
<button class="share-row__btn" aria-label="Share on X"><svg viewbox="0 0 24 24"><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"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Facebook"><svg viewbox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 011.141.195v3.325a8.623 8.623 0 00-.653-.036 26.805 26.805 0 00-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 00-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647z"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Reddit"><svg viewbox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 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 12c0-.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"></path></svg></button>
<button class="share-row__btn" aria-label="Copy link"><svg viewbox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></button>
</div>
</div>
</div>
<a id="tf-related-post-rail-2" data-tf-family="related-post-rail" style="display:contents"></a>
<div class="related-articles">
<div class="related-articles__inner">
<p class="related-articles__eyebrow">More from the blog</p>
<div class="related-articles__grid">
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lore & Short Stories</span></div>
<h3 class="related-articles__title">Claim the Blade. Wear the Mask. Live the Myth.</h3>
<div class="related-articles__meta">
<span>3 May 2026</span>
<span class="related-articles__meta-sep"></span>
<span>12 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lightsaber Guides & Tips</span></div>
<h3 class="related-articles__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<div class="related-articles__meta">
<span>12 Jun 2026</span>
<span class="related-articles__meta-sep"></span>
<span>8 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">ARTSABERS News</span></div>
<h3 class="related-articles__title">Black Friday 2025: Every Deal in One Place</h3>
<div class="related-articles__meta">
<span>21 Nov 2025</span>
<span class="related-articles__meta-sep"></span>
<span>4 min read</span>
</div>
</a>
</div>
</div>
</div>
</section>
<div class="panel-seam" role="presentation"></div>
<!-- =====================================================================
4. WORKED EXAMPLE — LORE & SHORT STORIES
Claim the Blade. Wear the Mask. Live the Myth.
===================================================================== -->
<section class="worked-example">
<p class="worked-example__scope"><span class="worked-example__scope-num">03</span> Worked example — Long-form editorial (Lore & Short Stories)</p>
<a id="tf-hero-atmospheric-1" data-tf-family="hero-atmospheric" style="display:contents"></a>
<div class="article-hero-fullbleed">
<div class="article-hero-fullbleed__media" style="background-image: url('https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg');"></div>
<div class="article-hero-fullbleed__scrim"></div>
<div class="article-hero-fullbleed__bloom"></div>
<div class="article-hero-fullbleed__inner">
<div class="article-hero-fullbleed__chip">
<span class="category-chip">Lore & Short Stories</span>
</div>
<h1 class="article-hero-fullbleed__title">Claim the Blade. Wear the Mask. Live the Myth.</h1>
<p class="article-hero-fullbleed__subtitle">One night. One choice. One decision that would change everything.</p>
</div>
</div>
<!-- Byline sits BELOW the full-bleed hero, after content-first entry -->
<div class="article-body" style="padding-bottom: 0;">
<div class="article-body__inner">
<a id="tf-author-byline-1" data-tf-family="author-byline" style="display:contents"></a>
<div class="byline-editorial">
<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>
</div>
<article class="article-body" style="padding-top: 56px;">
<div class="article-body__inner">
<p class="lead drop-cap">The workshop smelled of ozone and warm metal — the after-scent of a long day at the bench and the low hum of coolant running through the pixel-strip housing. Cassian did not remember switching on the overheads. The light he was working by came from the blade itself, laid flat across the felt-lined tray, its emitter pointed away from him the way a good gunsmith angles a barrel. A soft orange bloom licked the underside of the shelf above. It was the only warm thing in the room.</p>
<p>He had built sabers for other people for six years. Every hilt in the case behind him had gone out the door strapped to a stand, wrapped in tissue, tucked into a foam-lined case addressed to a fan somewhere in Toronto or Perth or Malmö. He had never kept one. That was the rule. The blade you make is the blade you send. A saber-smith who hoards his own work is a saber-smith who has forgotten who the myth belongs to.</p>
<h2>The bench</h2>
<p>The bench itself was older than the workshop. His grandfather's woodworking bench, brought over on a container ship in 1994, the top scarred by three generations of chisels and now three years of pixel-strip solder. The vice at the near end still turned smoothly. The one at the far end had seized the summer his father died and Cassian had never gotten around to freeing it. There were rings under the coffee mug where the mug had sat every evening since. There was a smell of pine sap under the ozone, if you knew to look for it.</p>
<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>Tonight the bench held one blade. A Xenopixel V3 Core, custom carbon housing, a hilt he had machined from a solid billet across two weekends in April. The colour was a matched pair — ember at ignition, deep-forge at hold, and a signature flicker on unlit that he had spent three evenings tuning until it looked less like a fault and more like breath. It was, he was privately certain, the best thing he had ever built.</p>
<p>He had not built it for a customer.</p>
<hr class="section-break">
<h2>The choice</h2>
<p>Two boxes sat on the shelf above the bench. In the left one, a stand — matte black, satin-buffed, the ARTSABERS mark scored into the base. In the right one, a helmet. Beskar-inspired, matte black, the visor line ruthlessly clean. He had built the helmet the same weekend as the blade, from a set of forming dies his father had left in the shed and a resin cast he had never quite trusted until now.</p>
<p>The choice was simple. The stand was the safe thing — put the blade on the wall, admire it in the mornings, treat the eight weekends of work as an artefact. The helmet was the other thing. The helmet was what happened when the maker stopped being the maker and became the character. It was what he had not let himself do for six years.</p>
<p>He picked up the blade.</p>
<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>His grandfather had said that. His grandfather had been talking about a chisel at the time — a fluting chisel that had rolled off the bench and stopped just short of Cassian's ten-year-old bare foot, and his grandfather had picked it up, turned it over, handed it hilt-first to the boy and said the line with the weight of someone who had been waiting years to say it out loud. Cassian had not thought about it in a decade. It came back tonight like an unshielded arc.</p>
<h2>The workshop, at midnight</h2>
<p>He walked to the shelf. Took down the helmet. Set it on the bench beside the blade. The visor caught the ember bloom and threw it back at the ceiling in a long slow band, and for a second the whole workshop was lit the colour of a forge at dawn. Then the blade cycled to its idle flicker and the room went dim again, and it was only him, and the bench, and two objects that were about to become a person.</p>
<p>He fit the helmet over his head. The lining was warm from the packing foam. The T-visor cut narrowed his field of view to a single band of ember-lit room. He picked up the blade a second time — this time with the grip his father had taught him, the grip his grandfather had taught his father, the grip he had never once used on a customer's blade because a customer's blade is not yours to hold like that.</p>
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<div class="inline-image">
<div class="inline-image__frame">
<img class="inline-image__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" alt="">
</div>
<div class="inline-image__caption">
<span class="inline-image__fig">Fig. 1</span>
<span>The blade at hold — Xenopixel V3, custom carbon housing.</span>
</div>
</div>
<p>The blade ignited to full. The visor caught it. The workshop caught it. Somewhere in the dark space above the shelf a small metal thing — a hex key, probably — rolled off a ledge and hit the concrete floor with a bright ringing note that sounded, for one absurd second, like an answering hum.</p>
<p>Cassian stood in the middle of the workshop and did not move. He let the blade hum. He let the visor cast the room in orange. He let himself be, for the first time in six years, the thing he had been building for other people.</p>
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<div class="full-bleed-image">
<img class="full-bleed-image__img" src="https://camcom.dev/wp-content/uploads/2026/06/Dark-Katana-Kyber-Crystal-Lightsaber-11.jpg" alt="">
<div class="full-bleed-image__caption">
<span class="full-bleed-image__fig">Fig. 2</span>
<span>The workshop at midnight, seen from the far bench.</span>
</div>
</div>
<h2>The morning after</h2>
<p>He put both objects away before the sun came up. The blade went back into its case on the bench. The helmet went back on the shelf. He shut the workshop, locked the door, walked the two hundred yards down the yard to the house, and slept for the first time in three weeks without the low grinding worry he had been carrying since April.</p>
<p>In the morning he cancelled a customer order. Not a large one — a repeat client, a good one, the kind who would forgive a delay. He would build the replacement over the next fortnight. But the blade on the bench was already spoken for.</p>
<p>It was his.</p>
<a id="tf-pull-quote-3" 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 does not display it on a stand. He wears it on the belt some evenings, when the workshop is quiet and the yard is empty, and once — only once — he carried it out to the fence at the edge of the property and ignited it under the stars, and stood for a long time in the dark with the helmet catching the light, and did not think of anything at all.</p>
<p>That is the story of how the maker became the myth.</p>
<p>Yours is waiting to be built.</p>
<p class="article-body__signoff" style="font-style: italic;">— Chloe</p>
</div>
</article>
<div class="article-footer">
<div class="article-footer__inner">
<div class="tag-chip-row">
<span class="tag-chip-row__label">Tags</span>
<a href="#" class="tag-chip-row__chip">Lore</a>
<a href="#" class="tag-chip-row__chip">Short Stories</a>
<a href="#" class="tag-chip-row__chip">Workshop</a>
<a href="#" class="tag-chip-row__chip">Kyber</a>
<a href="#" class="tag-chip-row__chip">Mandalorian</a>
<a href="#" class="tag-chip-row__chip">Xenopixel V3</a>
</div>
<div class="share-row">
<span class="share-row__label">Share</span>
<button class="share-row__btn" aria-label="Share on X"><svg viewbox="0 0 24 24"><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"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Facebook"><svg viewbox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 011.141.195v3.325a8.623 8.623 0 00-.653-.036 26.805 26.805 0 00-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 00-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647z"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Reddit"><svg viewbox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 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 12c0-.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"></path></svg></button>
<button class="share-row__btn" aria-label="Copy link"><svg viewbox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></button>
</div>
</div>
</div>
<a id="tf-related-post-rail-3" data-tf-family="related-post-rail" style="display:contents"></a>
<div class="related-articles">
<div class="related-articles__inner">
<p class="related-articles__eyebrow">More from the blog</p>
<div class="related-articles__grid">
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lore & Short Stories</span></div>
<h3 class="related-articles__title">Claim the Blade. Wear the Mask. Live the Myth.</h3>
<div class="related-articles__meta">
<span>3 May 2026</span>
<span class="related-articles__meta-sep"></span>
<span>12 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lightsaber Guides & Tips</span></div>
<h3 class="related-articles__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<div class="related-articles__meta">
<span>12 Jun 2026</span>
<span class="related-articles__meta-sep"></span>
<span>8 min read</span>
</div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">ARTSABERS News</span></div>
<h3 class="related-articles__title">Black Friday 2025: Every Deal in One Place</h3>
<div class="related-articles__meta">
<span>21 Nov 2025</span>
<span class="related-articles__meta-sep"></span>
<span>4 min read</span>
</div>
</a>
</div>
</div>
</div>
<a id="tf-closing-cta-1" data-tf-family="closing-cta" style="display:contents"></a>
<div class="continue-band">
<div class="continue-band__inner">
<div>
<p class="continue-band__eyebrow">Continue the story</p>
<p class="continue-band__title">The Weight of Two Blades: A Zabrak's First Ignition →</p>
</div>
<a href="#" class="continue-band__cta">Read next <span aria-hidden="true">→</span></a>
</div>
</div>
</section>
<div class="panel-seam" role="presentation"></div>
<!-- =====================================================================
5. PATTERNS APPENDIX — every pattern in isolation, bordered panels
===================================================================== -->
<section class="appendix-section">
<div class="appendix-section__inner">
<p class="appendix-section__eyebrow">Patterns appendix · v1.0</p>
<h2 class="appendix-section__title">Every pattern the article template holds.</h2>
<p class="appendix-section__lede">Composable. Any article can use any subset. Each panel below shows one pattern in isolation, at rest on the page ground, with the annotation notes a writer or designer needs to choose it correctly.</p>
<!-- PANEL 01 — Typography scale -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">01</span> Typography scale</span>
<p class="pattern-panel__lede">The reading-surface type stack. Every article inherits from this ladder; nothing outside it renders in body prose.</p>
<div class="pattern-panel__demo">
<div class="type-scale">
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--hero-full">Hero display · full-bleed</p>
<p class="type-scale__note"><strong>Space Grotesk 500</strong><br>72px / 1.05</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--hero-compact">Hero display · compact</p>
<p class="type-scale__note"><strong>Space Grotesk 500</strong><br>48px / 1.1</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--h2">Article body H2</p>
<p class="type-scale__note"><strong>Space Grotesk 500</strong><br>32px / 1.2</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--h3">Article body H3</p>
<p class="type-scale__note"><strong>Space Grotesk 500</strong><br>24px / 1.25</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--h4">Article body H4</p>
<p class="type-scale__note"><strong>Space Grotesk 500</strong><br>20px / 1.3</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--body-lg">Body large — the lead paragraph opens at this scale to invite the reader into the piece.</p>
<p class="type-scale__note"><strong>Manrope 400</strong><br>20px / 1.6</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--body">Body regular — the main reading surface. Sits at 68ch max-width. Manrope reads well long-form at this scale on dark grounds.</p>
<p class="type-scale__note"><strong>Manrope 400</strong><br>18px / 1.65</p>
</div>
<div class="type-scale__row">
<p class="type-scale__sample type-scale__sample--body-sm">Body small — captions, byline meta, share-row context, footer copy.</p>
<p class="type-scale__note"><strong>Manrope 400</strong><br>14px / 1.5</p>
</div>
</div>
</div>
</div>
<!-- PANEL 02 — Pull-quote large -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">02</span> Pull-quote — large</span>
<p class="pattern-panel__lede">Full-width, centred. Space Grotesk 40px. Ember hairline top and bottom, soft ember bleed above and below. Used once per long-form article at most, at ~40% scroll.</p>
<div class="pattern-panel__demo">
<div class="pull-quote-large">
<p class="pull-quote-large__text">"You do not choose the blade. The blade chooses the hand that carries it."</p>
</div>
</div>
</div>
<!-- PANEL 03 — Pull-quote inline -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">03</span> Pull-quote — inline</span>
<p class="pattern-panel__lede">Half-width, side-pulled variant. Space Grotesk 26px, ember rail on the pulled side. Body wraps around it.</p>
<div class="pattern-panel__demo" style="overflow: hidden;">
<div style="max-width: 68ch; margin: 0 auto;">
<div class="pull-quote-inline">
<p class="pull-quote-inline__text">A saber-smith who hoards his own work is a saber-smith who has forgotten who the myth belongs to.</p>
</div>
<p style="font-family: var(--font-body); font-size: 17px; color: var(--chrome-warm); line-height: 1.65;">The workshop had been quiet all evening. Cassian worked the last bead of solder into place with the patience of someone who no longer noticed the passing of hours, only the changing pitch of the coolant hum behind the bench. There was a smell of pine sap under the ozone if you knew to look for it. He had not switched on the overhead light in three hours. The blade lit the room enough. That was, he thought, a sign that the work was going well.</p>
</div>
</div>
</div>
<!-- PANEL 04 — Blockquote -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">04</span> Blockquote — attributed & unattributed</span>
<p class="pattern-panel__lede">Manrope body, left indent, ember rail on the left. Attributed variant carries an em-dash + source line in Space Grotesk micro-caps.</p>
<div class="pattern-panel__demo pattern-panel__grid-2">
<div>
<div class="attributed-quote">
<p class="attributed-quote__text">"The Kyber sings to those who listen."</p>
<p class="attributed-quote__attr">Ancient Jedi Codex, unnumbered fragment</p>
</div>
</div>
<div>
<a id="tf-pull-quote-4" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
<p class="article-blockquote__text">The Kyber sings to those who listen.</p>
</blockquote>
</div>
</div>
</div>
<!-- PANEL 05 — Callout box -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">05</span> Callout box — three variants</span>
<p class="pattern-panel__lede">Ember-bordered card with an ember icon chip top-left. Three variants: KEY TAKEAWAY, DID YOU KNOW, CAUTION. CAUTION uses forge-red hairline in place of ember.</p>
<div class="pattern-panel__demo">
<div class="callout-box">
<div class="callout-box__icon">i</div>
<p class="callout-box__eyebrow">Key takeaway</p>
<p class="callout-box__body">A helmet turns a saber from a solo prop into a costume. Costume-ready shifts your collection from displayable to wearable.</p>
</div>
<a id="tf-other-5" data-tf-family="other" style="display:contents"></a>
<div class="callout-box">
<div class="callout-box__icon">i</div>
<p class="callout-box__eyebrow">Key takeaway</p>
<p class="callout-box__body">A helmet turns a saber from a solo prop into a costume. Costume-ready shifts your collection from displayable to wearable — and that shift is where fans stop being spectators and start being characters.</p>
</div>
<a id="tf-other-6" data-tf-family="other" style="display:contents"></a>
<div class="callout-box callout-box--caution">
<div class="callout-box__icon">!</div>
<p class="callout-box__eyebrow">Caution</p>
<p class="callout-box__body">Heavy-duelling blades are rated for direct saber-on-saber contact. Baselit RGB blades are display-grade; check the duelling grade on the product page before pairing them for a sparring build.</p>
</div>
</div>
</div>
<!-- PANEL 06 — Inline image + caption -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">06</span> Inline image + caption</span>
<p class="pattern-panel__lede">Image at body max-width (68ch container), 16:10 crop, ember Fig-mark on caption. Small muted body text below.</p>
<div class="pattern-panel__demo">
<div style="max-width: 68ch; margin: 0 auto;">
<div class="inline-image">
<div class="inline-image__frame">
<img class="inline-image__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="Starkiller V3 Lightsaber — Xenopixel V3">
</div>
<div class="inline-image__caption">
<span class="inline-image__fig">Fig. 1</span>
<span>Starkiller V3 — Xenopixel V3 Core. One of the flagship builds in the summer 2026 catalogue.</span>
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 07 — Image pair -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">07</span> Image pair</span>
<p class="pattern-panel__lede">Two images side-by-side at body max-width, gutter between, one caption per image. Stacks vertically on mobile.</p>
<div class="pattern-panel__demo">
<div style="max-width: 68ch; margin: 0 auto;">
<div class="image-pair">
<div class="image-pair__cell">
<div class="image-pair__frame">
<img class="image-pair__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg" alt="">
</div>
<div class="image-pair__caption">
<span class="image-pair__fig">Fig. 1</span>
<span>Apprentice Black Duelling — RGB-X.</span>
</div>
</div>
<div class="image-pair__cell">
<div class="image-pair__frame">
<img class="image-pair__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="">
</div>
<div class="image-pair__caption">
<span class="image-pair__fig">Fig. 2</span>
<span>Mandalorian Helmet, beskar-inspired.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 08 — Full-bleed image break -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">08</span> Full-bleed image break</span>
<p class="pattern-panel__lede">Image at 100vw, breaks out of body max-width, ember hairlines top and bottom. Optional muted caption below at body max-width. Used at ~75% scroll on long-form pieces.</p>
<div class="pattern-panel__demo">
<div style="overflow: hidden; margin: 0 -40px;">
<div style="border-top: 1px solid rgba(255,122,46,0.40); border-bottom: 1px solid rgba(255,122,46,0.40); background: var(--carbon); padding: 20px 0 0;">
<img src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" style="width: 100%; height: 340px; object-fit: cover; display: block;" alt="">
<div style="max-width: 68ch; margin: 12px auto 24px; padding: 0 40px; display: flex; gap: 12px; align-items: baseline; font-family: var(--font-body); font-size: 13px; color: var(--chrome-dim);">
<span style="font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); white-space: nowrap;">Fig. 1</span>
<span>Full-bleed break — Carbon Strike, Xenopixel V3.</span>
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 09 — Drop-cap -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">09</span> Drop-cap</span>
<p class="pattern-panel__lede">Space Grotesk display, ember, 5 lines tall on the first paragraph. Used on <strong>every</strong> article across all modes and categories.</p>
<div class="pattern-panel__demo">
<div style="max-width: 68ch; margin: 0 auto;">
<p class="drop-cap" style="font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--chrome-warm); margin: 0;">The workshop smelled of ozone and warm metal. Cassian did not remember switching on the overheads. The light he was working by came from the blade itself, laid flat across the felt-lined tray, its emitter pointed away from him the way a good gunsmith angles a barrel. A soft orange bloom licked the underside of the shelf above.</p>
</div>
</div>
</div>
<!-- PANEL 10 — Section break -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">10</span> Section break — hairline & dots variants</span>
<p class="pattern-panel__lede">Ember hairline, 60px vertical margin, no text. Alternate variant renders three ember dots for softer transitions inside a scene.</p>
<div class="pattern-panel__demo">
<div style="max-width: 68ch; margin: 0 auto;">
<p style="font-family: var(--font-body); font-size: 17px; color: var(--chrome-warm); margin: 0 0 8px;">…the last bead of solder set, the coolant hum steady.</p>
<hr class="section-break">
<p style="font-family: var(--font-body); font-size: 17px; color: var(--chrome-warm); margin: 0 0 8px;">By morning he had made his choice.</p>
<hr class="section-break section-break--dots">
<p style="font-family: var(--font-body); font-size: 17px; color: var(--chrome-warm); margin: 0;">The workshop was quiet again.</p>
</div>
</div>
</div>
<!-- PANEL 11 — Lists -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">11</span> Lists — bulleted & numbered</span>
<p class="pattern-panel__lede">Bulleted lists carry an ember square marker with soft glow. Numbered lists render the number in Space Grotesk display, letter-spaced, decimal-leading-zero.</p>
<div class="pattern-panel__demo pattern-panel__grid-2">
<div>
<p style="font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--chrome-dim); margin: 0 0 16px;">Bulleted</p>
<ul class="ember-list ember-list--bullet">
<li class="ember-list__item">Baselit RGB-X Core — infinite blade colours and Bluetooth as standard.</li>
<li class="ember-list__item">Xenopixel V3 — 30+ sound fonts and pixel-strip depth.</li>
<li class="ember-list__item">SNV4 PRO — the duelling collector's default choice.</li>
<li class="ember-list__item">Proffie 2.2 — the top tier for fully custom builds.</li>
</ul>
</div>
<div>
<p style="font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--chrome-dim); margin: 0 0 16px;">Numbered</p>
<ol class="ember-list ember-list--number">
<li class="ember-list__item">
<span class="ember-list__lead">Beskar mask + heavy-duel blade</span>
Bounty hunter / duellist silhouette.
</li>
<li class="ember-list__item">
<span class="ember-list__lead">Death Trooper visor + Xenopixel V3</span>
Imperial elite. The con-photo build.
</li>
<li class="ember-list__item">
<span class="ember-list__lead">Armorer's forge-mask + SNV4 Pro double-blade</span>
The lore-first collector's build.
</li>
</ol>
</div>
</div>
</div>
<!-- PANEL 12 — Byline row -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">12</span> Byline row</span>
<p class="pattern-panel__lede">Avatar (36×36 ember-bordered circle) + author name (display) + separator dot + date (muted body) + separator dot + reading time (muted body). Chrome only — no author-bio bar, no "Written by" prefix.</p>
<div class="pattern-panel__demo">
<a id="tf-byline-row-3" data-tf-family="byline-row" style="display:contents"></a>
<div class="byline-row">
<div class="byline-row__avatar">C</div>
<span class="byline-row__name">Chloe</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">8 Jul 2026</span>
<span class="byline-row__sep"></span>
<span class="byline-row__meta">3 min read</span>
</div>
</div>
</div>
<!-- PANEL 13 — Category chip -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">13</span> Category chip</span>
<p class="pattern-panel__lede">Uppercase Manrope, letter-spaced, ember hairline border, ember dot at 8px. Sits in the hero as the article's category badge and inside related-articles cards.</p>
<div class="pattern-panel__demo" style="display: flex; flex-wrap: wrap; gap: 12px;">
<span class="category-chip">ARTSABERS News</span>
<span class="category-chip">Lightsaber Guides & Tips</span>
<span class="category-chip">Lore & Short Stories</span>
</div>
</div>
<!-- PANEL 14 — Tag chip row -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">14</span> Tag chip row</span>
<p class="pattern-panel__lede">Four to six tags, uppercase Manrope small, ember hairline border, chrome-warm text on carbon ground. Sits above the share row in the article footer.</p>
<div class="pattern-panel__demo">
<div class="tag-chip-row">
<span class="tag-chip-row__label">Tags</span>
<a href="#" class="tag-chip-row__chip">Lore</a>
<a href="#" class="tag-chip-row__chip">Workshop</a>
<a href="#" class="tag-chip-row__chip">Kyber</a>
<a href="#" class="tag-chip-row__chip">Mandalorian</a>
<a href="#" class="tag-chip-row__chip">Xenopixel V3</a>
</div>
</div>
</div>
<!-- PANEL 15 — Share row -->
<div class="pattern-panel">
<span class="pattern-panel__legend"><span class="pattern-panel__legend-num">15</span> Share row</span>
<p class="pattern-panel__lede">Four buttons horizontal: X, Facebook, Reddit, Copy link. Icon-only on desktop; native share overlay on mobile via Web Share API. No LinkedIn, no WhatsApp, no share-count numbers.</p>
<div class="pattern-panel__demo">
<div class="share-row" style="border-top: 0; padding-top: 0;">
<span class="share-row__label">Share</span>
<button class="share-row__btn" aria-label="Share on X"><svg viewbox="0 0 24 24"><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"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Facebook"><svg viewbox="0 0 24 24"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 011.141.195v3.325a8.623 8.623 0 00-.653-.036 26.805 26.805 0 00-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 00-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647z"></path></svg></button>
<button class="share-row__btn" aria-label="Share on Reddit"><svg viewbox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 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 12c0-.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"></path></svg></button>
<button class="share-row__btn" aria-label="Copy link"><svg viewbox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg></button>
</div>
</div>
</div>
<!-- PANEL 16 — Related-articles card -->
<div class="pattern-panel" style="padding: 40px 0 44px;">
<span class="pattern-panel__legend" style="left: 32px;"><span class="pattern-panel__legend-num">16</span> Related-articles card</span>
<p class="pattern-panel__lede" style="padding-left: 40px; padding-right: 40px;">3-up card. Each card = featured image + category chip + title + reading time. Ember-hairline separators between cards. Section eyebrow: "MORE FROM THE BLOG" (plain).</p>
<div class="pattern-panel__demo">
<div class="related-articles" style="background: transparent; padding: 32px 40px 0; border-top: 0;">
<div class="related-articles__inner" style="max-width: 100%;">
<p class="related-articles__eyebrow">More from the blog</p>
<div class="related-articles__grid">
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lore & Short Stories</span></div>
<h3 class="related-articles__title">Claim the Blade. Wear the Mask. Live the Myth.</h3>
<div class="related-articles__meta"><span>3 May 2026</span><span class="related-articles__meta-sep"></span><span>12 min read</span></div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">Lightsaber Guides & Tips</span></div>
<h3 class="related-articles__title">Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet</h3>
<div class="related-articles__meta"><span>12 Jun 2026</span><span class="related-articles__meta-sep"></span><span>8 min read</span></div>
</a>
<a class="related-articles__card" href="#">
<div class="related-articles__frame">
<img class="related-articles__img" src="https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg" alt="">
</div>
<div class="related-articles__chip"><span class="category-chip">ARTSABERS News</span></div>
<h3 class="related-articles__title">Black Friday 2025: Every Deal in One Place</h3>
<div class="related-articles__meta"><span>21 Nov 2025</span><span class="related-articles__meta-sep"></span><span>4 min read</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =====================================================================
PAGE FOOTER — carbon ground, minimal
===================================================================== -->
<footer class="page-footer">
<div class="page-footer__inner">
<div>
<p class="page-footer__brand">ART<span class="page-footer__brand-mark">SABERS</span></p>
<p class="page-footer__tagline">From factory floor to your door. Every character, every Saber Core, every duelling grade — with real support from a real team.</p>
</div>
<div>
<p class="page-footer__col-title">Shop</p>
<ul class="page-footer__list">
<li><a href="#" class="page-footer__link">Lightsabers</a></li>
<li><a href="#" class="page-footer__link">Cosplay Helmets</a></li>
<li><a href="#" class="page-footer__link">Parts & Accessories</a></li>
<li><a href="#" class="page-footer__link">Offers & Deals</a></li>
</ul>
</div>
<div>
<p class="page-footer__col-title">Read</p>
<ul class="page-footer__list">
<li><a href="#" class="page-footer__link">Blog</a></li>
<li><a href="#" class="page-footer__link">Guides & Tips</a></li>
<li><a href="#" class="page-footer__link">Lore & Short Stories</a></li>
<li><a href="#" class="page-footer__link">News</a></li>
</ul>
</div>
<div>
<p class="page-footer__col-title">Support</p>
<ul class="page-footer__list">
<li><a href="#" class="page-footer__link">Contact</a></li>
<li><a href="#" class="page-footer__link">Shipping</a></li>
<li><a href="#" class="page-footer__link">Returns</a></li>
<li><a href="#" class="page-footer__link">FAQ</a></li>
</ul>
</div>
</div>
<div class="page-footer__base">
<span>© 2026 ARTSABERS. All rights reserved.</span>
<span>Kyber Hull · Editorial Patterns v1.0</span>
</div>
</footer>
</body>
</html>