:root {
  --paper: #efe4cc;
  --paper-light: #f6eedb;
  --ink: #2b1e16;
  --ink-soft: #5c4838;
  --red: #a3261a;
  --desk: #231a14;
  --rule: 1px solid var(--ink);

  --font-display: "Abril Fatface", "Bodoni 72", Didot, Georgia, serif;
  --font-deco: "Limelight", "Abril Fatface", Georgia, serif;
  --font-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --font-caps: "IM Fell English SC", "Old Standard TT", Georgia, serif;
  --font-type: "Special Elite", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }

.sheet {
  position: relative;
  max-width: 1080px;
  margin: 32px auto;
  padding: clamp(16px, 4.5vw, 64px);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .09 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 82, 40, .18) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* Halftone dot screen over the whole sheet, the way cheap two-color stock printed. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(43, 30, 22, .07) 1px, transparent 1.4px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.sheet > * { position: relative; }

/* ---------- shared ---------- */

.kicker {
  margin: 0 0 .4em;
  font-family: var(--font-caps);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .12em;
  color: var(--red);
  text-align: center;
}

.section-title {
  margin: 0 0 .6em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-wrap: balance;
}

.rule-double {
  height: 6px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.rule-ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(32px, 6vw, 56px) 0;
  color: var(--red);
  font-size: .8rem;
  letter-spacing: .5em;
}
.rule-ornament::before,
.rule-ornament::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- masthead ---------- */

.masthead { text-align: center; }

.masthead-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: var(--rule);
  font-family: var(--font-caps);
  font-size: .95rem;
  letter-spacing: .06em;
}

.masthead-title {
  margin: .12em 0 .08em;
  font-family: var(--font-deco);
  font-weight: 400;
  font-size: clamp(2.2rem, 10.5vw, 7rem);
  line-height: 1;
  letter-spacing: .02em;
}
.masthead-title .tld {
  font-size: .42em;
  color: var(--red);
  letter-spacing: .04em;
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(24px, 5vw, 48px);
  text-align: center;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 13vw, 8.6rem);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Offset shadow imitates the second plate printing slightly out of register. */
.hero-caliber {
  margin: -.04em 0 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 32vw, 17rem);
  line-height: .9;
  color: var(--red);
  text-shadow: .025em .02em 0 var(--ink);
}

.hero-sub {
  margin: .3em 0 0;
  font-family: var(--font-caps);
  font-size: clamp(1.25rem, 3.6vw, 2rem);
  letter-spacing: .08em;
}

.hero-figure {
  margin: clamp(16px, 4vw, 40px) auto 0;
  max-width: 780px;
}
.hero-figure figcaption,
.clipping figcaption {
  margin-top: 8px;
  font-style: italic;
  font-size: .9rem;
  color: var(--ink-soft);
}

.starburst {
  position: absolute;
  top: clamp(180px, 30vw, 330px);
  right: 0;
  width: 170px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--paper-light);
  transform: rotate(-12deg);
  clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%);
}
.starburst span {
  font-family: var(--font-caps);
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: .04em;
  text-align: center;
}

.hero-body {
  max-width: 40em;
  margin: clamp(20px, 4vw, 36px) auto 0;
  font-size: 1.15rem;
  text-align: justify;
  hyphens: auto;
}
.hero-body::first-letter {
  float: left;
  margin: .06em .08em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: .8;
  color: var(--red);
}

/* ---------- name ---------- */

.equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(12px, 3vw, 32px);
  text-align: center;
}
.term { display: flex; flex-direction: column; align-items: center; }
.year {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1;
}
.term .label {
  margin-top: 6px;
  font-family: var(--font-caps);
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: .04em;
}
.term.result .year { color: var(--red); text-shadow: .02em .02em 0 var(--ink); }
.op {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--red);
}

.name-body {
  max-width: 34em;
  margin: 1.2em auto 0;
  text-align: center;
  font-size: 1.15rem;
}

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.feature { padding: 0 clamp(20px, 3vw, 36px); }
.feature:first-child { padding-left: 0; }
.feature:last-child { padding-right: 0; border-left: var(--rule); }

.feature-title {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}
.feature-title span {
  display: block;
  margin-top: .25em;
  font-family: var(--font-caps);
  font-size: .5em;
  letter-spacing: .1em;
  color: var(--red);
}

.feature-figure { margin: 0 0 1em; }
.feature > p:not([class]) { text-align: justify; hyphens: auto; }

.clipping {
  width: min(100%, 320px);
  margin: 1.6em auto;
  padding: 10px 10px 8px;
  background: var(--paper-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 18px rgba(60, 40, 20, .28);
  transform: rotate(-1.6deg);
  text-align: center;
}
.clipping img { width: 100%; filter: sepia(.25) contrast(1.02); }
.clipping-patent { transform: rotate(1.4deg); }
.clipping-patent img { filter: none; }

.particulars {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 1.4em 0 0;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  font-size: .98rem;
}
.particulars dt,
.particulars dd {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px dotted var(--ink-soft);
}
.particulars dt {
  padding-right: 16px;
  font-family: var(--font-caps);
  letter-spacing: .04em;
}
.particulars dd { text-align: right; }
.particulars dd span { white-space: nowrap; }
.particulars dt:last-of-type,
.particulars dd:last-of-type { border-bottom: 0; }

.pull-quote {
  margin: 2.4em 0 0;
  padding: 22px 20px 18px;
  border: 3px double var(--red);
  text-align: center;
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  color: var(--red);
  text-wrap: balance;
}
.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--font-caps);
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

@media (min-width: 861px) {
  .clipping-patent { width: min(100%, 360px); }
}

/* ---------- manual page ---------- */

.manual-page {
  margin: 2em 0 0;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 28px) 12px;
  background: var(--paper-light);
  border: 1px solid rgba(43, 30, 22, .35);
  box-shadow: 4px 5px 0 rgba(43, 30, 22, .12);
  font-size: .9rem;
  line-height: 1.5;
}
.manual-running {
  margin: 0;
  padding-bottom: 4px;
  border-bottom: var(--rule);
  font-family: var(--font-caps);
  font-size: .74rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.manual-title {
  margin: .8em 0 .5em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.manual-pistol {
  width: min(100%, 300px);
  margin: 0 auto;
}
.manual-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 14px;
  margin: 1em 0;
}
.manual-specs dt { margin: 0; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.manual-specs dd { margin: 0; }

.manual-cartridges {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
}
.manual-label {
  grid-column: 1 / -1;
  margin: 0;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .04em;
}
.cartridge { width: 112px; height: auto; }
.cartridge-case { fill: url(#cartridge-case); }
.cartridge-bullet { fill: url(#cartridge-bullet); stroke: var(--ink); stroke-width: .8; }
.cartridge text {
  fill: var(--paper-light);
  font-family: var(--font-body);
  font-weight: 700;
  text-anchor: middle;
}
.manual-loads { margin: 0; font-size: .86rem; }
.manual-loads small { font-size: .78rem; }

.manual-page hr {
  width: 40%;
  margin: 1.2em auto;
  border: 0;
  border-top: var(--rule);
}
.manual-page p:not([class]) { margin: 0 0 .7em; text-align: justify; hyphens: auto; }
.manual-folio { margin: .4em 0 0; text-align: center; font-size: .8rem; }
.manual-credit {
  margin: 8px 0 0;
  font-style: italic;
  font-size: .85rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- reprint ---------- */

.reprint { margin-top: clamp(40px, 7vw, 72px); }
.reprint-clippings {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 4vw, 48px);
}
.reprint-clippings .clipping { margin: 1em 0; }
.clipping-tall { width: min(100%, 300px); transform: rotate(-2deg); }
.clipping-wide { width: min(100%, 560px); transform: rotate(1.2deg); }

/* ---------- testimonials ---------- */

.testimonials .columns {
  column-count: 3;
  column-gap: 36px;
  column-rule: var(--rule);
}
.testimonials blockquote {
  margin: 0 0 1.4em;
  break-inside: avoid;
}
.testimonials blockquote p {
  margin: 0;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
}
.testimonials cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-family: var(--font-caps);
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.testimonials cite::before { content: "— "; }

/* ---------- coupon ---------- */

.coupon-wrap { margin-top: clamp(40px, 7vw, 72px); }

.coupon {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 32px);
  border: 2px dashed var(--ink);
  background: var(--paper-light);
  font-family: var(--font-type);
}
/* Without FE0E and a symbol font, Firefox falls back to its bundled color emoji font for ✂. */
.scissors {
  position: absolute;
  top: -.62em;
  left: 24px;
  font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
}
.coupon-head {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--red);
}
.coupon-sub {
  margin: .3em 0 1em;
  font-family: var(--font-caps);
  letter-spacing: .1em;
  text-align: center;
}
.coupon-body { font-size: .98rem; }

.coupon-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 1.2em 0;
}
.field {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
  font-size: .95rem;
}
.field::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--ink);
}
.field.half { flex-basis: calc(50% - 10px); }

.coupon-caliber { margin: 0; font-size: .95rem; }
.coupon-caliber span { white-space: nowrap; margin-right: 10px; }
.coupon-caliber em { font-style: normal; color: var(--ink-soft); }

.coupon-note {
  margin: 10px 0 0;
  font-size: .85rem;
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- fine print ---------- */

.fine-print {
  margin-top: clamp(40px, 7vw, 72px);
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
}
.fine-print .rule-double { margin-bottom: 16px; }
.fine-print p { max-width: 60em; margin: 0 auto .6em; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .features { grid-template-columns: 1fr; }
  .feature,
  .feature:first-child,
  .feature:last-child { padding: 0; border-left: 0; }
  .feature + .feature {
    margin-top: 40px;
    padding-top: 40px;
    border-top: var(--rule);
  }
  .testimonials .columns { column-count: 2; }
  .starburst {
    position: relative;
    top: auto;
    right: auto;
    width: 140px;
    margin: 20px auto 0;
  }
  .starburst span { font-size: .9rem; }
}

@media (max-width: 560px) {
  .sheet { margin: 0; box-shadow: none; }
  .masthead-meta { justify-content: center; font-size: .85rem; }
  .masthead-meta span:nth-child(2) { order: -1; flex-basis: 100%; }
  .testimonials .columns { column-count: 1; }
  .hero-body, .feature > p:not([class]), .manual-page p:not([class]) { text-align: left; }
  .field.half { flex-basis: 100%; }
}