/* ==========================================================================
   Castle & Shell: site stylesheet
   Redesign, October 2026. Early-2000s corporate: fixed-width boxed page,
   beveled tabs, gradient title bars, Verdana body / Georgia headings.
   ========================================================================== */

:root {
  --navy: #002060;          /* brand navy, from the original site */
  --navy-deep: #00143f;
  --navy-bar-1: #34558f;    /* box title bar gradient */
  --navy-bar-2: #102f6a;
  --steel: #50607a;
  --rule: #a7b3c6;
  --rule-lt: #cfd7e3;
  --frame: #7d8ba3;
  --panel: #eef2f7;
  --panel-2: #e1e7f0;
  --text: #1e2430;
  --muted: #5d6676;
  --link: #0a3a9a;
  --visited: #553081;
  --hover: #b3261e;
  --brass: #b08d3c;
  --brass-lt: #dcc78e;
  --brass-text: #7d5f17;
  /* Red Dawn Apparel: star red and gold, from its logo */
  --rda: #9e1f1d;
  --rda-2: #c8322d;
  --rda-gold: #ddbd4e;
  --rda-gold-lt: #f0dc9a;
  /* Arrington Mills (ARMIL): urban graphite and diamond crimson, from its logo */
  --armil: #3f4146;
  --armil-2: #64666c;
  --armil-red: #e5345a;
  --armil-red-dk: #b8243f;
}

* { box-sizing: border-box; }

html { background: #c9d1dd; }
body {
  margin: 0;
  padding: 18px 0 28px;
  font: 12px/1.6 Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
  color: var(--text);
  background: #c9d1dd repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px);
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--hover); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 4px 8px; z-index: 10; }

/* ---------- Page frame ---------- */
.page {
  width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--frame);
  box-shadow: 0 2px 12px rgba(0, 20, 60, .28);
}

/* ---------- Masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: 0 16px 0 18px;
  background: linear-gradient(#0b2e7a, #002060 55%, #00184c);
  border-bottom: 3px solid var(--brass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.masthead .logo { display: block; flex: 0 1 360px; }
.masthead .logo img { display: block; width: 360px; }
.utility { text-align: right; color: #c3cfe6; font-size: 10px; line-height: 1.5; }
.utility .ulinks a { color: #fff; text-decoration: none; }
.utility .ulinks a:hover { text-decoration: underline; }
.utility .ulinks span { color: #6f84b3; padding: 0 2px; }
.utility .strap { margin-top: 3px; color: var(--brass-lt); letter-spacing: .4px; }

/* ---------- Tab navigation ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
  background: linear-gradient(#f6f8fb, #d1d9e5);
  border-bottom: 1px solid var(--frame);
}
.nav a {
  display: block;
  padding: 7px 13px 6px;
  font: bold 11px Verdana, Tahoma, sans-serif;
  color: var(--navy);
  text-decoration: none;
  border-left: 1px solid #fff;
  border-right: 1px solid #a9b5c7;
}
.nav li:first-child a { border-left-color: #a9b5c7; }
.nav a:visited { color: var(--navy); }
.nav a:hover { background: linear-gradient(#fff, #e7ecf3); text-decoration: underline; color: var(--navy); }
.nav a[aria-current="page"] {
  background: #fff;
  border-top: 3px solid var(--brass);
  padding-top: 4px;
  margin-bottom: -1px;
  border-bottom: 1px solid #fff;
}

/* ---------- Breadcrumb / date bar ---------- */
.crumbs {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 14px;
  font-size: 10px;
  color: var(--muted);
  border-bottom: 1px dotted var(--rule);
}
.crumbs b { color: var(--text); font-weight: normal; }
.crumbs .sep { color: var(--rule); padding: 0 3px; }

/* ---------- Column layouts ---------- */
.cols { display: grid; grid-template-columns: 184px minmax(0, 1fr) 196px; }
.cols.two { grid-template-columns: 184px minmax(0, 1fr); }
.cols > * { padding: 14px; min-width: 0; }
.side { background: var(--panel); border-right: 1px solid var(--rule-lt); }
.rail { background: #f8f9fc; border-left: 1px solid var(--rule-lt); }
.main { padding: 16px 18px 22px; }

/* ---------- Sidebar boxes ---------- */
.box { margin: 0 0 14px; background: #fff; border: 1px solid var(--rule); }
.box:last-child { margin-bottom: 0; }
.box > h3 {
  margin: 0;
  padding: 4px 8px;
  font: bold 11px Verdana, Tahoma, sans-serif;
  color: #fff;
  background: linear-gradient(var(--navy-bar-1), var(--navy-bar-2));
  border-bottom: 1px solid var(--navy-deep);
}
.box > h3::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 6px 1px 0;
  vertical-align: middle;
  background: var(--brass-lt);
  border: 1px solid #6d5520;
}
.box .bd { padding: 7px 9px 8px; font-size: 11px; overflow-wrap: break-word; }
.box .bd p { margin: 0 0 6px; }
.box .bd p:last-child { margin: 0; }
.box .more { display: block; margin-top: 6px; text-align: right; font-size: 10px; }

/* Arrow-bulleted link lists */
.links { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.links li { position: relative; padding: 3px 0 3px 11px; border-bottom: 1px dotted var(--rule-lt); }
.links li:last-child { border-bottom: 0; }
.links li::before {
  content: "";
  position: absolute; left: 1px; top: 8px;
  border: 3.5px solid transparent;
  border-left: 4px solid var(--brass);
}
.links li.on > a { font-weight: bold; color: var(--text); text-decoration: none; }
.links li.on::before { border-left-color: var(--navy); }
.links .sub { display: block; color: var(--muted); font-size: 10px; }
.links li.sub-item { padding-left: 22px; }
.links li.sub-item::before { left: 12px; }

/* ---------- Type ---------- */
h1, h2 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: var(--navy); }
h1 { margin: 0 0 12px; padding-bottom: 6px; font-size: 22px; line-height: 1.25; border-bottom: 1px solid var(--rule); }
h2 { margin: 22px 0 8px; padding-bottom: 3px; font-size: 17px; line-height: 1.3; border-bottom: 1px dotted var(--rule); }
h3 { margin: 16px 0 5px; font: bold 12px/1.4 Verdana, Tahoma, sans-serif; color: var(--navy); }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
li { margin-bottom: 4px; }
.main > :first-child, .main > .eyebrow + h1 { margin-top: 0; }
.eyebrow {
  margin: 0 0 3px;
  font: bold 10px Tahoma, Verdana, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brass-text);
}
.lede { font-size: 13px; color: #2c3445; }
.muted { color: var(--muted); }
.small { font-size: 10px; }
.new {
  display: inline-block;
  margin-left: 3px;
  padding: 0 3px;
  font: bold 8px/12px Verdana, sans-serif;
  color: #fff;
  background: #c62828;
  border: 1px solid #8e1515;
  vertical-align: 1px;
}
a.ext::after {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 3px;
  background: url(../images/ext.svg) no-repeat;
  vertical-align: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 5px 12px;
  font: bold 11px Verdana, Tahoma, sans-serif;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(#c8a24e, #98742a);
  border: 1px solid #6a4f17;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.btn:visited, .btn:hover { color: #fff; }
.btn:hover { background: linear-gradient(#d5b05c, #a47f33); }
.btn.alt { color: var(--navy); background: linear-gradient(#fff, #d6dde8); border-color: var(--frame); }
.btn.alt:hover { background: linear-gradient(#fff, #e6ebf2); }
.btn::after { content: " \00bb"; }
.btn { white-space: nowrap; }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 230px;
  background: linear-gradient(90deg, #00184c 0%, #000a22 46%, #000 62%);
  border-bottom: 1px solid #000;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; flex: 0 1 470px; padding: 26px 0 28px 26px; color: #d7e0f0; }
.hero-copy .eyebrow { color: var(--brass-lt); }
.hero-copy h2 {
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  font-size: 27px;
  line-height: 1.15;
  color: #fff;
}
.hero-copy p { font-size: 12px; max-width: 410px; }
.hero-copy .btn { margin: 4px 6px 0 0; }
.hero-art { flex: 0 0 290px; align-self: stretch; display: flex; min-height: 230px; padding: 10px 14px 0 0; }

/* ---------- Storefront pair (home) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--frame); }
.store { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--text); }
.duo > .store + .store { border-left: 1px solid var(--frame); }
.store:visited { color: var(--text); }
.store-hd {
  padding: 5px 12px;
  font: bold 12px Verdana, Tahoma, sans-serif;
  color: #fff;
  letter-spacing: .3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.store-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; }
.store-hd small { font-weight: normal; font-size: 10px; opacity: .85; }
.store-bd { display: flex; gap: 12px; padding: 12px; flex: 1; }
.store-bd p { margin: 0 0 6px; font-size: 11px; }
.store-bd .go-link { font-size: 11px; font-weight: bold; color: var(--link); }
.store:hover .go-link { color: var(--hover); text-decoration: underline; }
.store.armil .store-bd { flex-direction: row-reverse; text-align: right; }


/* ---------- Partner cards: Castle = solid, Shell = outline ---------- */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 12px; }
.partner { border: 1px solid var(--rule); background: #fff; }
.partner .ph { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.partner .name { font: bold 13px Verdana, Tahoma, sans-serif; }
.partner .role { font-size: 10px; line-height: 1.35; }
.partner .pb { padding: 8px 10px 10px; font-size: 11px; border-top: 1px solid var(--rule-lt); }
.partner .pb p { margin: 0; }
.partner .pb ul { margin: 0; padding-left: 16px; }
.partner .pb li { margin-bottom: 3px; }
.partner.castle .ph { background: linear-gradient(#0b2e7a, var(--navy)); color: #fff; }
.partner.castle .role { color: var(--brass-lt); }
.partner.shell .ph { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.partner.shell .role { color: var(--brass-text); }
.partner.shell .ph { flex-direction: row-reverse; text-align: right; }

/* ---------- Bulletins list (rail + page) ---------- */
.news { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.news li { padding: 5px 0 6px; border-bottom: 1px dotted var(--rule-lt); margin: 0; }
.news li:last-child { border-bottom: 0; }
.news .date { display: block; font: bold 10px Tahoma, Verdana, sans-serif; color: var(--brass-text); letter-spacing: .3px; }

/* Document links with page icon */
.docs { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.docs li { padding: 4px 0 5px 22px; margin: 0; background: url(../images/doc.svg) no-repeat 0 5px / 16px; border-bottom: 1px dotted var(--rule-lt); }
.docs li:last-child { border-bottom: 0; }
.docs .meta { display: block; font-size: 10px; color: var(--muted); }

/* ---------- Tables ---------- */
table.data { width: 100%; margin: 8px 0 14px; border-collapse: collapse; font-size: 11px; border: 1px solid var(--frame); }
table.data th, table.data td { padding: 5px 7px; text-align: left; vertical-align: top; border: 1px solid var(--rule-lt); }
table.data thead th {
  font-weight: bold;
  color: #fff;
  background: linear-gradient(var(--navy-bar-1), var(--navy-bar-2));
  border-color: var(--navy-deep);
  white-space: nowrap;
}
table.data tbody tr:nth-child(even) td { background: #f3f6fa; }
table.data tbody th { width: 34%; background: var(--panel); color: var(--navy); font-weight: bold; }

/* Fact sheet (key/value) */
table.facts { width: 100%; border-collapse: collapse; font-size: 11px; margin: 0 0 12px; }
table.facts th, table.facts td { padding: 4px 8px; border-bottom: 1px dotted var(--rule); text-align: left; vertical-align: top; }
table.facts th { width: 38%; color: var(--muted); font-weight: normal; }

/* ---------- Callouts ---------- */
.note {
  margin: 12px 0;
  padding: 8px 12px 8px 12px;
  background: #fbf8ef;
  border: 1px solid #e2d6b0;
  border-left: 4px solid var(--brass);
}
.note > b:first-child { display: block; font: bold 10px Tahoma, Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-text); margin-bottom: 2px; }
.note p:last-child { margin-bottom: 0; }

.panel { padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule-lt); margin: 0 0 12px; }

/* Can / cannot lists */
ul.yes, ul.no { list-style: none; padding-left: 0; }
ul.yes li, ul.no li { position: relative; padding-left: 20px; }
ul.yes li::before, ul.no li::before { position: absolute; left: 0; top: 0; font-weight: bold; }
ul.yes li::before { content: "\2713"; color: #2e7d32; }
ul.no li::before { content: "\2716"; color: #c62828; }

/* ---------- Name plate: the insignia leads, then pointcastle & Sabot_Shell ---------- */
.crest { display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px minmax(0, 1fr); margin: 4px 0 8px; }
.crest > .insignia {
  display: flex; align-items: center; justify-content: center;
  margin-right: 12px; padding: 12px;
  background: linear-gradient(#0b2e7a, var(--navy-deep));
  border: 1px solid var(--navy-deep);
  box-shadow: inset 0 -3px 0 var(--brass);
}
.crest > .insignia img { display: block; width: 46px; height: 46px; }
.crest .c, .crest .s { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; min-height: 76px; }
.crest .c { color: #fff; background: linear-gradient(#0b2e7a, var(--navy) 60%, #00184c); border: 1px solid var(--navy-deep); }
.crest .s { color: var(--navy); background: #fff; border: 2px solid var(--navy); }
.crest .amp { display: flex; align-items: center; justify-content: center; font: italic 26px/1 Georgia, "Times New Roman", serif; color: var(--brass); }
.crest .nm { font: 19px/1.1 Georgia, "Times New Roman", serif; }
.crest .nm b { font-weight: bold; }
.crest .rl { display: block; margin-top: 4px; font: 10px Verdana, sans-serif; letter-spacing: .3px; }
.crest .c .rl { color: var(--brass-lt); }
.crest .s .rl { color: var(--brass-text); }
.caption { margin: 0 0 14px; font-size: 10px; color: var(--muted); }

/* Partner bio cards (about page) reuse .partner */
.partners.bios { margin-top: 10px; }
.partner table.facts { margin: 0; }
.partner table.facts th { width: 30%; padding-left: 0; }
.partner table.facts td { padding-right: 0; }
.partner table.facts tr:last-child > * { border-bottom: 0; }

/* ---------- Storefront banners & galleries ---------- */

.storerow { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; }
.storerow > :first-child { flex: 1 1 auto; min-width: 0; }
.storerow h2:first-child { margin-top: 0; }
.storerow .facts-box { flex: 0 0 230px; }
.storerow .facts-box table.facts { margin: 0; }
.box table.facts { margin: 0; }
.box table.facts th { width: 44%; padding-left: 0; }
.box table.facts td { padding-right: 0; }
.box table.facts tr:last-child > * { border-bottom: 0; }

figure.shot { margin: 0 0 14px; padding: 4px; background: #fff; border: 1px solid var(--rule); }
figure.shot img { display: block; width: 100%; background: #000; }
figure.shot figcaption { padding: 5px 4px 1px; font-size: 10px; color: var(--muted); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.gallery a { display: block; padding: 3px; background: #fff; border: 1px solid var(--rule); }
.gallery a:hover { border-color: var(--hover); }
.gallery img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: #000; }
.pending { padding: 18px 12px; text-align: center; font-size: 11px; color: var(--muted); background: repeating-linear-gradient(135deg, #f4f6f9 0 6px, #eceff4 6px 12px); border: 1px dashed var(--rule); margin: 0 0 14px; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Storefront summary blocks (overview page) */
.summary { margin: 0 0 16px; border: 1px solid var(--rule); }
.summary .store-hd { font-size: 13px; }
.summary .store-bd { padding: 12px; }
.summary .store-bd p { font-size: 12px; }

/* ---------- Documents ---------- */
.dochead { margin: 0 0 16px; border: 1px solid var(--frame); background: var(--panel); }
.dochead .ref { display: flex; justify-content: space-between; padding: 4px 10px; font: bold 10px Tahoma, Verdana, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: linear-gradient(var(--navy-bar-1), var(--navy-bar-2)); }
.dochead .ref span:last-child { color: var(--brass-lt); }
.dochead h1 { margin: 0; padding: 10px 12px 8px; border-bottom: 1px solid var(--rule-lt); font-size: 20px; background: #fff; }
.dochead table.facts { margin: 0; background: #fff; }
.dochead table.facts th { width: 22%; padding-left: 12px; }
.dochead .actions { padding: 5px 12px; font-size: 10px; border-top: 1px solid var(--rule-lt); }
.dochead .actions span { color: var(--rule); padding: 0 4px; }
.doc h2 { scroll-margin-top: 10px; }
/* Document sidebars: contents and related links stay in view together */
.side-sticky { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.toc ol { margin: 0; padding: 0 0 0 18px; font-size: 11px; }
.toc ol li { padding: 2px 0; margin: 0; }

/* "In short" summary at the top of a document */
.tldr { margin: 0 0 18px; padding: 10px 14px 6px; background: #f3f6fa; border: 1px solid var(--rule); border-left: 4px solid var(--navy); }
.tldr > b:first-child { display: block; margin-bottom: 4px; font: bold 10px Tahoma, Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
.tldr ul { margin-bottom: 6px; }

/* Key terms */
dl.terms { margin: 0 0 12px; }
dl.terms dt { margin-top: 8px; font-weight: bold; color: var(--navy); }
dl.terms dd { margin: 2px 0 0 14px; }

/* Law, our policy, or advice: small labels so readers can tell them apart */
.tag { display: inline-block; padding: 0 5px; margin-right: 4px; font: bold 9px/15px Verdana, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #fff; vertical-align: 1px; }
.tag.law { background: #1d3f86; }
.tag.policy { background: var(--brass-text); }
.tag.advice { background: #4b6b3a; }
.tag.roblox { background: #393b3d; }

/* Numbered steps */
ol.steps { padding-left: 22px; }
ol.steps li { margin-bottom: 6px; }

/* Version history */
table.history td:first-child, table.history td:nth-child(2) { white-space: nowrap; width: 1%; }

/* Library catalogue */
table.catalog td.title a { font-weight: bold; }
table.catalog td:last-child { white-space: nowrap; }
table.catalog td.title .sub { display: block; margin-top: 2px; color: var(--muted); }
table.catalog td.title { padding-left: 26px; background: url(../images/doc.svg) no-repeat 6px 6px / 16px; }
table.catalog tbody tr:nth-child(even) td.title { background: #f3f6fa url(../images/doc.svg) no-repeat 6px 6px / 16px; }
.filter { margin: 0 0 6px; font-size: 11px; }
.filter a { padding: 1px 6px; text-decoration: none; border: 1px solid transparent; }
.filter a.on { color: var(--text); font-weight: bold; background: var(--panel); border-color: var(--rule); }

/* ---------- News page ---------- */
h2.year { margin-top: 18px; font-size: 15px; color: var(--steel); }
.newsitem { padding: 2px 0 10px 12px; margin: 0 0 12px; border-left: 3px solid var(--rule-lt); }
.newsitem:target { border-left-color: var(--brass); background: #fbf8ef; }
.newsitem .date { margin: 0; font: bold 10px Tahoma, Verdana, sans-serif; letter-spacing: .5px; color: var(--brass-text); text-transform: uppercase; }
.newsitem h3 { margin: 1px 0 5px; font: normal 15px/1.3 Georgia, "Times New Roman", serif; }
.newsitem p { margin-bottom: 6px; }

/* Orange 2000s feed badge */
.rss {
  display: inline-block;
  padding: 0 4px;
  font: bold 9px/13px Verdana, sans-serif;
  color: #fff;
  letter-spacing: .5px;
  background: linear-gradient(#ff9a3c, #e86a00);
  border: 1px solid #a64b00;
  vertical-align: 1px;
}
a:hover .rss { background: linear-gradient(#ffad5c, #f27a10); }


/* Site map */
.sitemap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sitemap h3 { margin: 14px 0 4px; font-size: 12px; }
.sitemap h3:first-child { margin-top: 4px; }
.sitemap .links, .sitemap .docs { margin-left: 4px; }

/* ==========================================================================
   Storefront brands: Red Dawn Apparel (.rda) and Arrington Mills (.armil).
   Colours come from each logo; the camo tiles (tools/make_camo.py) recreate
   each logo's background and appear as a trim strip and inside titles.
   ========================================================================== */

/* Header bars: brand gradient, a 2px accent line, then an 8px camo trim */
.store-hd.rda, .store.rda .store-hd, .summary.rda .store-hd,
.store-hd.armil, .store.armil .store-hd, .summary.armil .store-hd { padding-bottom: 14px; border: 0; }
/* a hard edge under each camo trim, so its white patches don't melt into the page */
.store.rda .store-hd, .summary.rda .store-hd, .division.rda { border-bottom: 1px solid #3e3829; }
.store.armil .store-hd, .summary.armil .store-hd, .division.armil { border-bottom: 1px solid #5f6061; }
.store.rda .store-hd, .summary.rda .store-hd {
  background:
    linear-gradient(var(--rda-gold), var(--rda-gold)) left bottom 8px / 100% 2px no-repeat,
    linear-gradient(var(--rda-2), var(--rda)) left top / 100% calc(100% - 10px) no-repeat,
    url(../images/camo-rda.png) left top / 128px;
}
.store.armil .store-hd, .summary.armil .store-hd {
  background:
    linear-gradient(var(--armil-red), var(--armil-red)) left bottom 8px / 100% 2px no-repeat,
    linear-gradient(var(--armil-2), var(--armil)) left top / 100% calc(100% - 10px) no-repeat,
    url(../images/camo-armil.png) left top / 230px;
}
.store.rda .store-hd small, .summary.rda .store-hd small { color: var(--rda-gold-lt); opacity: 1; }
.store.armil .store-hd small, .summary.armil .store-hd small { color: #dcdde0; opacity: 1; }
.store.rda:hover { background: #fdf9f0; }
.store.armil:hover { background: #f6f6f7; }

/* Emblem plates: the star / diamond on a plain ground, no camo behind */
.logo-tile { flex: 0 0 auto; width: 122px; height: 122px; padding: 12px; border: 1px solid; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rule); }
.logo-tile img { display: block; width: 96px; height: 96px; }
.logo-tile { padding: 9px; }
.logo-tile img { width: 102px; height: 102px; }
.rda .logo-tile {
  background: radial-gradient(circle, rgba(255,252,242,.97) 30%, rgba(255,252,242,.74) 58%, rgba(255,252,242,.62)), url(../images/camo-rda.png) center / 150px;
  border-color: #cdb67a;
}
.armil .logo-tile {
  background: radial-gradient(circle, rgba(255,255,255,.97) 30%, rgba(255,255,255,.7) 58%, rgba(255,255,255,.55)), url(../images/camo-armil.png) center / 260px;
  border-color: #a9a8a8;
}

/* Storefront page banners */
.division { display: flex; align-items: center; gap: 16px; margin: -16px -18px 14px; padding: 16px 18px 26px; color: #fff; }
.division > img { flex: 0 0 auto; width: 76px; height: 76px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.division .eyebrow { margin-bottom: 4px; }
.division h1 { margin: 0; padding: 0; border: 0; color: #fff; line-height: 1; }
.division p { margin: 6px 0 0; font-size: 11px; opacity: .92; }
.division.rda {
  background:
    linear-gradient(var(--rda-gold), var(--rda-gold)) left bottom 10px / 100% 2px no-repeat,
    linear-gradient(var(--rda-2), var(--rda) 70%, #7c1715) left top / 100% calc(100% - 12px) no-repeat,
    url(../images/camo-rda.png) left top / 128px;
}
.division.rda .eyebrow { color: var(--rda-gold-lt); }
.division.armil {
  background:
    linear-gradient(var(--armil-red), var(--armil-red)) left bottom 10px / 100% 2px no-repeat,
    linear-gradient(var(--armil-2), var(--armil) 70%, #2f3135) left top / 100% calc(100% - 12px) no-repeat,
    url(../images/camo-armil.png) left top / 230px;
}
.division.armil .eyebrow { color: #f2a3b4; }

/* Titles lettered in the storefront's own camouflage */
.division h1 .camo {
  display: inline-block;
  font: 34px/1 "Arial Black", "Arial Bold", Gadget, Impact, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.division h1 .rest {
  display: block;
  margin-top: 5px;
  font: bold 11px/1 Verdana, Tahoma, sans-serif;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.division.rda h1 .rest { color: var(--rda-gold-lt); }
.division.armil h1 .rest { color: #dcdde0; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .division h1 .camo {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(1px 2px 0 rgba(0,0,0,.3));
  }
  .division.rda h1 .camo {
    background-image: linear-gradient(rgba(250,243,224,.6), rgba(250,243,224,.6)), url(../images/camo-rda.png);
    background-size: auto, 150px;
  }
  .division.armil h1 .camo {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(../images/camo-armil.png);
    background-size: auto, 260px;
  }
}

/* Table columns, sidebar boxes and buttons in brand colours */
table.data thead th.rda { background: linear-gradient(var(--rda-2), var(--rda)); border-color: #6d1414; border-bottom: 2px solid var(--rda-gold); }
table.data thead th.armil { background: linear-gradient(var(--armil-2), var(--armil)); border-color: #2a2b2f; border-bottom: 2px solid var(--armil-red); }
.box.rda > h3 { background: linear-gradient(var(--rda-2), var(--rda)); border-bottom-color: #5e1110; }
.box.rda > h3::before { background: var(--rda-gold); border-color: #8a6d1f; }
.box.armil > h3 { background: linear-gradient(var(--armil-2), var(--armil)); border-bottom-color: #26272a; }
.box.armil > h3::before { background: var(--armil-red); border-color: #7f1830; }
.btn.rda { background: linear-gradient(#d6443e, #a5221f); border-color: #6d1414; }
.btn.rda:hover { background: linear-gradient(#e0514b, #b22926); }
.btn.armil { background: linear-gradient(#ec5577, var(--armil-red-dk)); border-color: #8a1d35; }
.btn.armil:hover { background: linear-gradient(#f06787, #c92e4c); }

/* Gallery placeholder shows the ARMIL camo until photos arrive */
.pending.armil { padding: 34px 12px; background: url(../images/camo-armil.png) left top / 300px; border: 1px solid #9d9c9c; }
.pending.armil span { display: inline-block; padding: 5px 12px; color: var(--armil); background: #fff; border: 1px solid #9d9c9c; box-shadow: 2px 2px 0 rgba(0,0,0,.15); }

/* ==========================================================================
   Product viewer and range grid (js/viewer.js, js/viewer3d.js).
   Pictures come from store/<key>/; 3D models from models/<key>/.
   ========================================================================== */
.viewer { min-width: 0; max-width: 100%; background: #fff; border: 1px solid var(--rule); }
.viewer-hd { display: flex; justify-content: space-between; padding: 4px 8px; font: bold 11px Verdana, Tahoma, sans-serif; color: #fff; background: linear-gradient(var(--navy-bar-1), var(--navy-bar-2)); }
.viewer-hd .viewer-count { font-weight: normal; opacity: .85; }
.viewer.rda .viewer-hd { background: linear-gradient(var(--rda-2), var(--rda)); border-bottom: 2px solid var(--rda-gold); }
.viewer.armil .viewer-hd { background: linear-gradient(var(--armil-2), var(--armil)); border-bottom: 2px solid var(--armil-red); }
.viewer:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.viewer-stage { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff 30%, #e8ecf2); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.viewer.js:not(.single) .viewer-stage { cursor: grab; }
.viewer-stage.dragging { cursor: grabbing; }
.viewer.rda .viewer-stage { background: radial-gradient(circle at 50% 45%, rgba(255,252,242,.97) 32%, rgba(255,252,242,.8) 72%), url(../images/camo-rda.png) center / 150px; }
.viewer.armil .viewer-stage { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.97) 32%, rgba(255,255,255,.78) 72%), url(../images/camo-armil.png) center / 260px; }
.viewer-img { position: absolute; inset: 6% 12%; width: 76%; height: 88%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.viewer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: grab; touch-action: pan-y; }
.viewer-canvas:active { cursor: grabbing; }
.viewer-stage.is-3d .viewer-canvas { opacity: 1; }
.viewer-stage.is-3d .viewer-img { opacity: 0; }
.viewer-hint { position: absolute; right: 8px; bottom: 6px; font-size: 9px; color: var(--muted); display: none; pointer-events: none; }
.viewer-stage.is-3d .viewer-hint { display: block; }
.viewer-bar { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: linear-gradient(#f6f8fb, #e1e6ee); border-top: 1px solid var(--rule); }
.viewer-info { flex: 1; min-width: 0; text-align: center; line-height: 1.3; }
.viewer-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 11px Verdana, Tahoma, sans-serif; }
.viewer-cat { display: block; font-size: 10px; color: var(--muted); }
.viewer-edge {
  position: absolute; top: 50%; z-index: 2;
  width: 30px; height: 48px; margin-top: -24px; padding: 0 0 3px;
  font: bold 26px/1 Verdana, sans-serif; color: var(--navy);
  background: linear-gradient(rgba(255,255,255,.95), rgba(221,227,236,.95));
  border: 1px solid; border-color: #fff #6f7d94 #6f7d94 #fff;
  outline: 1px solid rgba(68,82,107,.5);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
.viewer-edge.prev { left: 6px; }
.viewer-edge.next { right: 6px; }
.viewer-edge:hover { background: linear-gradient(#fff, #e9edf3); color: var(--hover); }
.viewer-edge:active { border-color: #6f7d94 #fff #fff #6f7d94; }
.viewer:not(.js) .viewer-edge, .viewer.single .viewer-edge { display: none; }
.viewer-strip { display: flex; gap: 4px; overflow-x: auto; padding: 6px; background: #f7f8fa; border-top: 1px solid var(--rule-lt); }
.viewer:not(.js) .viewer-strip { display: none; }
.viewer-strip button { flex: 0 0 auto; padding: 1px; background: #fff; border: 1px solid var(--rule-lt); cursor: pointer; }
.viewer-strip button:hover { border-color: var(--frame); }
.viewer-strip button[aria-current="true"] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.viewer.rda .viewer-strip button[aria-current="true"] { border-color: var(--rda); box-shadow: 0 0 0 1px var(--rda); }
.viewer.armil .viewer-strip button[aria-current="true"] { border-color: var(--armil-red); box-shadow: 0 0 0 1px var(--armil-red); }
.viewer-strip img { display: block; width: 44px; height: 44px; object-fit: contain; }

/* In the homepage banner: one random product, no frame, a spotlight on the dark background */
.has-js .viewer.hero:not(.js) .viewer-img { visibility: hidden; }
.viewer.hero { display: flex; flex-direction: column; width: 100%; height: 100%; background: none; border: 0; }
.viewer.hero .viewer-stage { flex: 1; aspect-ratio: auto; background: radial-gradient(ellipse 46% 50% at 50% 52%, rgba(226,233,246,.78), rgba(176,192,224,.42) 48%, rgba(120,140,190,.12) 70%, transparent 82%); }
.viewer.hero .viewer-img { inset: 4% 13%; width: 74%; height: 92%; filter: drop-shadow(0 5px 6px rgba(0,10,40,.35)); }
.viewer.hero .viewer-hint { color: #9fb0cc; }
.viewer.hero .viewer-bar { background: rgba(0,10,34,.55); border-top: 1px solid rgba(255,255,255,.12); }
.viewer.hero .viewer-name { color: #fff; }
.viewer.hero .viewer-cat { color: #9fb0cc; }
.viewer.hero .viewer-edge { width: 26px; height: 40px; margin-top: -20px; font-size: 22px; color: #fff; background: rgba(0,10,34,.45); border-color: rgba(255,255,255,.35) rgba(0,0,0,.4) rgba(0,0,0,.4) rgba(255,255,255,.35); outline-color: rgba(255,255,255,.2); box-shadow: none; }
.viewer.hero .viewer-edge:hover { color: var(--brass-lt); background: rgba(0,10,34,.7); }

/* Range grid */
.range h3 { margin-top: 18px; }
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.range-grid li { margin: 0; }
.range-grid a { display: block; height: 100%; padding: 4px 4px 6px; font-size: 10px; line-height: 1.3; text-align: center; text-decoration: none; background: #fff; border: 1px solid var(--rule-lt); }
.range-grid a:hover { border-color: var(--hover); }
.range-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: radial-gradient(#fff 45%, #eef1f5); }
.range-grid span { display: block; margin-top: 4px; }
.range-grid em { font-style: normal; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { padding: 10px 14px 12px; font-size: 10px; color: var(--muted); text-align: center; background: linear-gradient(#e9edf3, #dfe5ee); border-top: 1px solid var(--frame); }
.footer .flinks { margin-bottom: 6px; }
.footer .flinks a { color: var(--navy); white-space: nowrap; }
.footer .flinks span { color: var(--rule); padding: 0 1px; }
.footer p { margin: 0 0 3px; }
.footer .fine { max-width: 620px; margin: 6px auto 0; color: #7a8394; }
.totop { display: block; width: 800px; margin: 6px auto 0; text-align: right; font-size: 10px; }
.totop a { color: #33415c; }

/* ==========================================================================
   Small screens: the fixed 800px page relaxes to a single column.
   ========================================================================== */
@media (max-width: 820px) {
  body { padding: 0; }
  .page { width: auto; border: 0; box-shadow: none; }
  .totop { width: auto; padding: 0 16px 12px; }
  .masthead { flex-wrap: wrap; padding: 12px 16px; }
  .masthead .logo, .masthead .logo img { width: 100%; max-width: 360px; }
  .utility { text-align: left; }
  .nav { padding-left: 0; }
  .nav li { flex: 1 1 auto; }
  .nav a { text-align: center; padding-left: 8px; padding-right: 8px; }
  .crumbs { padding: 5px 16px; }
  .cols, .cols.two { display: flex; flex-direction: column; }
  .cols > * { padding: 14px 16px; }
  .cols > .main { order: -1; }
  .side { border-right: 0; border-top: 1px solid var(--rule-lt); }
  .rail { border-left: 0; border-top: 1px solid var(--rule-lt); }
  .hero { flex-direction: column; }
  .hero-copy { padding: 20px 16px 12px; flex-basis: auto; }
  .hero-art { flex-basis: auto; height: 300px; padding: 0 16px; }
  .duo, .partners { grid-template-columns: 1fr; }
  .duo > .store + .store { border-left: 0; border-top: 1px solid var(--frame); }
  .store.armil .store-bd { flex-direction: row; text-align: left; }
  .partner.shell .ph { flex-direction: row; text-align: left; }
  .partners { gap: 10px; }
  .crest { grid-template-columns: 64px minmax(0, 1fr); }
  .crest > .insignia { grid-row: 1 / span 3; margin-right: 10px; padding: 9px; }
  .crest > .insignia img { width: 38px; height: 38px; }
  .crest .amp { justify-content: flex-start; padding: 3px 0 3px 16px; font-size: 18px; }
  .division { margin: -14px -16px 14px; padding: 14px 16px 24px; }
  .division h1 .camo { font-size: 26px; }
  .storerow { flex-direction: column; align-items: stretch; }
  .storerow .facts-box { flex-basis: auto; width: 100%; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .range-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .cols-2, .sitemap { grid-template-columns: 1fr; }
  .side-sticky { position: static; max-height: none; overflow: visible; }
  table.data { display: block; overflow-x: auto; }
}
@media (max-width: 420px) {
  .store-bd, .store.armil .store-bd { flex-direction: column; text-align: left; }
  .division > img { width: 52px; height: 52px; }
  .division h1 .camo { font-size: 22px; }
  .division h1 .rest { letter-spacing: 3px; }
}

/* ---------- Print: a proper paged document ---------- */
.print-only, .print-toc { display: none; }

@page {
  size: letter;
  margin: 18mm 17mm 20mm;
  @top-left { font: 8pt Georgia, "Times New Roman", serif; color: #555; }
  @top-right { font: 8pt Georgia, "Times New Roman", serif; color: #555; }
  @bottom-left { content: "castleshell.com"; font: 8pt Georgia, "Times New Roman", serif; color: #555; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Georgia, "Times New Roman", serif; color: #555; }
}

@media print {
  html, body { background: #fff !important; }
  body { padding: 0; font: 10.5pt/1.5 Georgia, "Times New Roman", serif; color: #000; }
  .page { width: auto; border: 0; box-shadow: none; }
  .utility, .nav, .crumbs, .side, .rail, .totop, .skip, .no-print, .footer .flinks { display: none !important; }
  .cols, .cols.two { display: block; }
  .cols > * { padding: 0; }
  a { color: #000; text-decoration: none; }
  a.ext::after { display: none; }

  /* Letterhead */
  .masthead { display: flex; align-items: flex-end; justify-content: space-between; min-height: 0; margin: 0 0 16pt; padding: 0 0 6pt; background: none; border-bottom: 1.5pt solid #000; box-shadow: none; }
  .masthead .logo, .masthead .logo img { width: 190px; }
  .masthead .logo img { filter: invert(1) hue-rotate(180deg); }
  .masthead::after { content: "castleshell.com"; font: 9pt Georgia, serif; color: #333; }

  /* Type */
  h1, h2, h3 { color: #000; break-after: avoid; page-break-after: avoid; }
  h2 { margin: 18pt 0 6pt; padding-bottom: 2pt; font-size: 14pt; border-bottom: .75pt solid #000; }
  h3 { margin: 12pt 0 4pt; font: bold 11pt/1.3 Georgia, "Times New Roman", serif; }
  p, li, dd { orphans: 3; widows: 3; }
  .lede { font-size: 11pt; }
  .small { font-size: 8.5pt; }
  .eyebrow { color: #000; }

  /* Title block */
  .dochead { margin: 0 0 14pt; background: none; border: 0; }
  .dochead .ref { padding: 0; color: #000; background: none !important; font: bold 8pt Verdana, sans-serif; letter-spacing: 2pt; }
  .dochead .ref span:last-child { color: #555; }
  .dochead h1 { margin: 2pt 0 8pt; padding: 0 0 8pt; font-size: 21pt; line-height: 1.2; background: none; border-bottom: 1.5pt solid #000; }
  .dochead table.facts { width: auto; font-size: 9pt; background: none; }
  .dochead table.facts th { width: auto; padding: 1pt 18pt 1pt 0; color: #444; }
  .dochead table.facts th, .dochead table.facts td { border: 0; }
  .dochead table.facts td { padding: 1pt 0; }
  .print-only { display: table-row; }

  /* Contents, on paper only */
  .print-toc { display: block; margin: 0 0 16pt; padding: 8pt 10pt; border: .75pt solid #000; break-inside: avoid; }
  .print-toc b { display: block; margin-bottom: 4pt; font: bold 8pt Verdana, sans-serif; letter-spacing: 1.5pt; text-transform: uppercase; }
  .print-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 18pt; font-size: 9.5pt; }
  .print-toc li { margin: 0 0 2pt; break-inside: avoid; }

  /* Boxes and labels: outlines instead of colours, since printers drop backgrounds */
  .tldr, .note, .panel { padding: 7pt 10pt; background: none !important; border: .75pt solid #000; break-inside: avoid; }
  .tldr { border-left-width: 3pt; }
  .tldr > b:first-child, .note > b:first-child { color: #000; }
  .tag { padding: 0 3pt; font-size: 6.5pt; line-height: 11pt; color: #000; background: none !important; border: .75pt solid #000; }
  dl.terms dt { color: #000; }
  dl.terms dd { break-inside: avoid; }

  /* Tables */
  table.data { font-size: 9pt; border: .75pt solid #000; break-inside: auto; }
  table.data tr { break-inside: avoid; }
  table.data thead { display: table-header-group; }
  table.data thead th { color: #000; background: none !important; border-color: #000; border-bottom: 1.5pt solid #000; }
  table.data th, table.data td { border-color: #999; }
  table.data tbody tr:nth-child(even) td, table.data tbody th { background: none; }
  table.data tbody th { color: #000; }
  ol.steps li, ul.yes li, ul.no li { break-inside: avoid; }

  /* Sources: show each link's address, since paper can't be clicked */
  #references ~ ul a[href^="http"]::after, #sources ~ ul a[href^="http"]::after {
    content: " <" attr(href) ">"; font: 7.5pt Verdana, sans-serif; color: #444; word-break: break-all;
  }

  /* Footer: just the copyright and disclaimer */
  .footer { margin-top: 20pt; padding: 6pt 0 0; text-align: left; background: none; border-top: .75pt solid #999; font: 7.5pt Georgia, serif; color: #555; }
  .footer .fine { max-width: none; margin: 2pt 0 0; }

  /* Camo titles are background-filled text, and printers drop backgrounds */
  .division { color: #000; background: none !important; border: 0; padding: 0 0 8px; margin: 0 0 12px; }
  .division h1 .camo { color: #000 !important; background: none !important; -webkit-text-stroke: 0; filter: none; }
  .division .eyebrow, .division p, .division h1 .rest { color: #000 !important; }
}