/** Shopify CDN: Minification failed

Line 45:0 Unexpected "}"
Line 543:0 Expected "}" to go with "{"

**/
/* Velorution letter theme — staging */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid #b71a1a; outline-offset: 3px; }

body.velo-letter {
  --paper: #ffffff;
  --ink: #111111;
  --ink-faint: #757575;
  --red: #b71a1a;
  --green: #3f784c;
  color: var(--ink);
  font: 400 17px/1.6 Baskerville, "Baskerville Old Face", "Hoefler Text", Georgia, serif;
  padding: clamp(28px, 8vw, 72px) 0 clamp(48px, 10vw, 96px);
  background: #c9ab7f;
}

.wood-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,0.14), rgba(70,50,28,0.3) 88%),
    linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,0.14) 46%, rgba(255,255,255,0) 62%),
    url(/cdn/shop/files/velo-wood-l.jpg?v=1784467865&width=1600) center / cover no-repeat;
}
@media (orientation: portrait) {
  .wood-layer {
    background:
      radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,0.14), rgba(70,50,28,0.3) 88%),
      linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,0.14) 46%, rgba(255,255,255,0) 62%),
      url(/cdn/shop/files/velo-wood-p.jpg?v=1784467865&width=1000) center / cover no-repeat;
  }
}

.col { width: min(600px, calc(100% - 28px)); margin-left: auto; margin-right: auto; }

}

.sheet {
  background:
    radial-gradient(180% 120% at 20% -10%, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%),
    var(--paper);
  background-blend-mode: soft-light, normal;
  position: relative;
  transform: rotate(-0.4deg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 16px 36px -20px rgba(0,0,0,0.35);
  padding: clamp(28px, 6vw, 52px) clamp(20px, 6vw, 56px) clamp(24px, 5vw, 44px);
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: settle 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes settle {
  from { transform: translateY(-12px) rotate(-1.2deg); opacity: 0; }
  to   { transform: translateY(0) rotate(-0.4deg); opacity: 1; }
}

/* letterhead nav */
.lh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  padding-bottom: 13px;
  margin-bottom: clamp(20px, 5vw, 32px);
}
.lh-logo { display: block; line-height: 0; }
.lh-logo img { height: clamp(22px, 4.5vw, 28px); width: auto; }
.lh-nav { display: flex; gap: clamp(12px, 2.5vw, 20px); align-items: baseline; flex-wrap: wrap; }
.lh-nav a {
  font: 600 11.5px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.lh-nav a:hover { border-bottom-color: var(--ink-faint); }

/* story beats */
.beat { margin: 0 0 clamp(20px, 5vw, 30px); }
.beat-head {
  font: 400 clamp(21px, 5.2vw, 27px)/1.25 Baskerville, Georgia, serif;
  text-wrap: balance;
  margin: 0 0 6px;
}
.beat-body { margin: 0 0 10px; max-width: 50ch; font-size: clamp(16px, 4vw, 17.5px); }
.beat-body:last-child { margin-bottom: 0; }
.was { font-style: italic; color: var(--red); }
.underline {
  text-decoration-line: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
hr.fold { border: 0; border-top: 1px dashed var(--ink-faint); opacity: 0.55; margin: clamp(24px, 6vw, 34px) 0; }
.clearfix { overflow: hidden; }

/* polaroids */
.photo-wrap { float: right; width: 118px; margin: 2px 0 12px 20px; transform: rotate(2.2deg); }
.photo-wrap--left { float: left; margin: 2px 20px 12px 0; transform: rotate(-2deg); }
@media (max-width: 420px) {
  .photo-wrap, .photo-wrap--left { float: none; width: 96px; margin: 0 auto 16px; }
}
.photo {
  background: #e8e8e6;
  border: 7px solid var(--paper);
  border-bottom-width: 26px;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.35);
  position: relative;
}
.photo img { display: block; width: 100%; height: auto; }
.tape {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 56px; height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* CTA cards */
.cta {
  position: relative;
  margin: clamp(28px, 6vw, 40px) 0;
  transform: rotate(-0.6deg);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.4);
}
.cta--airmail {
  background: #fdf7ea;
  border: 7px solid;
  border-image: repeating-linear-gradient(-45deg,
    var(--red) 0 12px, #fdf7ea 12px 24px, #1f3a5f 24px 36px, #fdf7ea 36px 48px) 7;
  padding: clamp(20px, 5vw, 28px);
  padding-right: clamp(20px, 8vw, 96px);
}
.cta--airmail::after {
  content: "";
  position: absolute;
  top: -16px; right: 14px;
  width: 64px; height: 74px;
  background: url(/cdn/shop/files/velo-stamp.png?v=1784467863) center / contain no-repeat;
  transform: rotate(6deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
@media (max-width: 480px) {
  .cta--airmail { padding-right: clamp(20px, 5vw, 28px); }
  .cta--airmail::after { width: 48px; height: 56px; top: -12px; right: 8px; }
}
.cta--wire {
  background: #f6ecd0;
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(0.4deg);
  padding: 0 0 clamp(18px, 4vw, 24px);
}
.wire-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #111;
  color: #f6ecd0;
  font: 700 12px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 11px 16px;
  margin: 0 0 clamp(14px, 3.5vw, 18px);
}
.wire-band .wire-bolt { color: #e9b64d; letter-spacing: 0; }
.wire-body { padding: 0 clamp(16px, 4vw, 26px); }
.cta--wire .cta-head {
  font: 700 clamp(16px, 4.2vw, 20px)/1.55 "Courier New", Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  min-height: 2.2em;
}
.wire-cursor {
  display: inline-block;
  width: 0.55ch; height: 1em;
  background: #111;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .wire-cursor { animation: wire-blink 0.9s steps(1) infinite; }
}
@keyframes wire-blink { 50% { opacity: 0; } }
.cta--wire .cta-sub { font: 400 13.5px/1.6 "Courier New", Courier, monospace; }
.cta--wire .cta-input { background: #fff; border: 1.5px solid #111; font-family: "Courier New", Courier, monospace; }
.cta--wire .cta-count {
  font: 400 12.5px "Courier New", Courier, monospace;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
  .cta { opacity: 0; }
  .cta.inview { animation: cta-drop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .cta--wire.inview { animation-name: cta-drop-wire; }
  .cta--airmail.inview::after { animation: stamp-land 0.5s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes cta-drop {
  from { opacity: 0; transform: translateY(22px) rotate(0.8deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
}
@keyframes cta-drop-wire {
  from { opacity: 0; transform: translateY(22px) rotate(-0.6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0.4deg); }
}
@keyframes stamp-land {
  from { transform: rotate(14deg) scale(1.25); opacity: 0; }
  to   { transform: rotate(6deg) scale(1); opacity: 1; }
}
.cta-head { font-size: clamp(21px, 5.2vw, 26px); margin: 0 0 4px; font-weight: 400; }
.cta-sub { font-size: 15.5px; margin: 0 0 14px; max-width: 44ch; }
.cta-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-input {
  flex: 1 1 180px;
  min-width: 0;
  font: 400 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
}
.cta-input::placeholder { color: #9a9a9a; }
.cta-btn {
  font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.03em;
  padding: 13px 20px;
  background: var(--red);
  color: #fff;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cta-btn:hover {
  background: #911515;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(183, 26, 26, 0.6);
}
.cta-count { margin: 10px 0 0; font-size: 13.5px; font-style: italic; color: var(--ink-faint); }

.signoff { margin-top: clamp(20px, 5vw, 28px); }
.signoff .close { display: block; margin-bottom: 2px; font-size: 15px; }
.signoff .name { font-style: italic; font-size: 26px; color: var(--red); }

.btn-cta {
  display: inline-block;
  text-decoration: none;
  font: 600 12.5px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
}
.btn-cta:hover { background: #911515; }

/* letter-nav blocks */
.letter-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 5vw, 30px);
  padding-top: clamp(18px, 4vw, 22px);
  border-top: 1px dashed var(--ink-faint);
}
.letter-nav a {
  flex: 1 1 150px;
  text-decoration: none;
  padding: 14px 14px 12px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.letter-nav .nav-title {
  display: block;
  font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.letter-nav .nav-desc { display: block; font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--ink-faint); }
.letter-nav a:hover { background: var(--ink); color: var(--paper); }
.letter-nav a:hover .nav-desc { color: var(--paper); }

/* desk labels */
.desk-label {
  display: block;
  width: fit-content;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 9px 18px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(-0.8deg);
  margin: clamp(44px, 9vw, 64px) auto 20px;
}
.desk-sub {
  display: block;
  width: fit-content;
  text-align: center;
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  padding: 10px 20px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(0.6deg);
  margin: 18px auto 0;
  max-width: min(52ch, calc(100% - 28px));
}
.desk-sub a { color: var(--green); }

/* story cards */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3.5vw, 20px); }
@media (max-width: 560px) { .stories { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } }
.story {
  background:
    radial-gradient(180% 120% at 20% -10%, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%),
    var(--paper);
  position: relative;
  text-decoration: none;
  color: var(--ink);
  padding: 18px 18px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.4);
  display: block;
}
.story:nth-child(3n+1) { transform: rotate(-1.2deg); }
.story:nth-child(3n+2) { transform: rotate(0.7deg); }
.story:nth-child(3n)   { transform: rotate(-0.5deg); }
.story-img {
  height: 90px;
  margin: -18px -18px 14px;
  background: linear-gradient(150deg, #ececea, #d8d8d5) center / cover no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.story-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.story-title { font-size: 19.5px; font-weight: 400; line-height: 1.3; margin: 0 0 8px; text-wrap: balance; }
.story-link {
  font: 600 12.5px "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

/* exclusive ad */
.ad {
  background:
    radial-gradient(180% 120% at 20% -10%, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%),
    var(--paper);
  position: relative;
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  padding: clamp(22px, 5vw, 32px);
  transform: rotate(0.4deg);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.4);
  display: flex;
  gap: clamp(18px, 4vw, 28px);
  align-items: center;
  text-align: left;
}
@media (max-width: 520px) { .ad { flex-direction: column; text-align: center; } }
.ad-img {
  flex: none;
  width: clamp(160px, 34vw, 220px);
  aspect-ratio: 1;
  background: none;
  border: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.28));
}
.ad-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ad-eyebrow {
  font: 600 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 8px;
}
.ad-title { font-size: clamp(20px, 4.8vw, 24px); font-weight: 400; margin: 0 0 6px; text-wrap: balance; }
.ad-desc { font-size: 15.5px; margin: 0 0 14px; max-width: 40ch; }

/* products */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3.5vw, 20px); }
@media (max-width: 560px) { .products { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } }
.product {
  background:
    radial-gradient(180% 120% at 20% -10%, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%),
    var(--paper);
  position: relative;
  text-decoration: none;
  color: var(--ink);
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.4);
  display: block;
}
.product:nth-child(3n+1) { transform: rotate(0.9deg); }
.product:nth-child(3n+2) { transform: rotate(-0.8deg); }
.product:nth-child(3n)   { transform: rotate(0.5deg); }
.product-img {
  aspect-ratio: 1 / 1;
  margin: 0 0 12px;
  background: linear-gradient(150deg, #ececea, #d8d8d5) center / cover no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.product-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-name { font-size: 18px; font-weight: 400; margin: 0 0 4px; }
.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font: 400 13.5px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink-faint);
}
.product-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* post panel */
.post-panel {
  background:
    radial-gradient(180% 120% at 20% -10%, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%),
    var(--paper);
  position: relative;
  transform: rotate(-0.5deg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.4);
  padding: clamp(24px, 6vw, 40px) clamp(20px, 6vw, 44px);
}
.airmail::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 14px, var(--paper) 14px 28px, #1f3a5f 28px 42px, var(--paper) 42px 56px);
  opacity: 0.85;
}
.post-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.post-title { font-size: clamp(22px, 5.4vw, 28px); font-weight: 400; margin: 0 0 4px; }
.post-tag { font-style: italic; font-size: 15px; color: var(--ink-faint); margin: 0 0 16px; }
.post-stamp {
  flex: none;
  width: 84px;
  transform: rotate(3deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.post-stamp img { display: block; width: 100%; height: auto; }
@media (max-width: 420px) { .post-stamp { display: none; } }
.post-body { font-size: 16.5px; max-width: 52ch; margin: 0 0 12px; }
.post-list { margin: 0 0 18px; padding: 0; list-style: none; font-size: 15.5px; }
.post-list li { padding: 5px 0 5px 22px; position: relative; }
.post-list li::before {
  content: "✕";
  position: absolute;
  left: 2px;
  color: var(--green);
  font-size: 11px;
  top: 9px;
}
.post-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.post-price { font-style: italic; font-size: 14.5px; color: var(--ink-faint); }

/* P.S. footer */
.ps { margin-top: clamp(24px, 6vw, 34px); padding-top: clamp(16px, 4vw, 20px); border-top: 1px dashed var(--ink-faint); }
.ps-line { margin: 0 0 8px; font-size: 15px; }
.ps-line strong { font-weight: 400; font-style: italic; color: var(--green); }
.ps-line a {
  color: var(--ink);
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ps-small {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ————— Phones get the screen back (5 Sept 2026) —————
   At 375px the old numbers spent 73px — 19% of the display — on white space:
   14px each side from .col, then another 22.5px each side from .sheet's 6vw
   padding. Text was living in 302px. These bring that down to about 40px total.

   Deliberately scoped to max-width 640px and nothing above it. The letterhead
   in snippets/velo-lh.liquid cancels .sheet's horizontal padding with a
   negative margin using an IDENTICAL clamp, and that rule starts at 641px —
   changing the clamp itself would have to be mirrored there or the header
   stops lining up with the text beneath it. Below 641px there is no such rule
   to keep in step, so this is the safe place to take the space back.

   Lives at the END of this file on purpose. It was first written directly under
   .col, which is ABOVE the .sheet rule — and .sheet sets padding with the
   shorthand, so the later declaration won and the horizontal padding never
   moved. A media query adds no specificity; only source order decided it. */
@media (max-width: 640px) {
  .col { width: calc(100% - 12px); }
  .sheet { padding-left: 14px; padding-right: 14px; }