@font-face { font-family: 'Mochiy Pop One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(mochiypopone-400.woff2) format('woff2'); }
@font-face { font-family: 'Belanosima'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(belanosima-400.woff2) format('woff2'); }
@font-face { font-family: 'Belanosima'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(belanosima-600.woff2) format('woff2'); }
@font-face { font-family: 'Belanosima'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(belanosima-700.woff2) format('woff2'); }

:root {
  --stb-paper: #faf6ef;
  --stb-ink: #3a2b26;
  --stb-cocoa: #33241f;
  --stb-creamtx: #f4ecdf;
  --stb-rose: #a83d68;
  --stb-rosedeep: #8a2f54;
  --stb-sage: #3f7d5f;
  --stb-sagedeep: #2f5d46;
  --stb-lilac: #7a5f9e;
  --stb-blush: #f6e7ea;
  --stb-card: #ffffff;
  --stb-mist: #efe6d8;
  --stb-hush: #6b584f;

  --stb-body: var(--stb-ink);
  --stb-head: var(--stb-ink);
  --stb-soft: var(--stb-hush);
  --stb-kick: var(--stb-sagedeep);
  --stb-rule: #e2d6c4;
  --stb-panel: var(--stb-card);
  --stb-star: #96650f;
  --stb-link: var(--stb-rosedeep);

  --stb-breath: clamp(46px, 5.6vw, 82px);
  --stb-gutter: 22px;
  --stb-gutterwide: 28px;
  --stb-curve: 12px;
  --stb-tilecurve: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 17px/1.6 'Belanosima', 'Segoe UI', system-ui, sans-serif;
  background: var(--stb-paper);
  color: var(--stb-body);
}

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

a { color: var(--stb-link); }

h1, h2, h3, h4 {
  font-family: 'Mochiy Pop One', 'Trebuchet MS', Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.18;
  color: var(--stb-head);
  margin: 0 0 14px;
}
h1 { font-size: clamp(28px, 4.3vw, 44px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: 18.5px; line-height: 1.28; }
h4 { font-size: 16.5px; line-height: 1.32; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 21px; }
li { margin: 0 0 6px; }

:focus-visible { outline: 3px solid var(--stb-lilac); outline-offset: 2px; }

.stb-room { width: min(1150px, 100% - 48px); margin: 0 auto; }
.stb-aisle { width: min(760px, 100% - 48px); margin: 0 auto; }

.stb-skipnote {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--stb-rose); color: var(--stb-creamtx);
  padding: 10px 22px; border-radius: 0 0 var(--stb-curve) 0;
  font-weight: 600; text-decoration: none;
}
.stb-skipnote:focus { left: 0; }

.stb-topbar {
  background: var(--stb-paper);
  border-bottom: 1px solid var(--stb-rule);
  position: sticky; top: 0; z-index: 50;
}
.stb-topbar > div { display: flex; align-items: center; gap: 4px 26px; padding: 14px 0; }
.stb-marklink { display: inline-flex; flex: 0 0 auto; }
.stb-marklink img { width: 168px; height: 24px; }
.stb-topnav {
  display: flex; flex-wrap: wrap; gap: 3px 19px; margin-left: auto;
  font-size: 15px; font-weight: 600;
}
.stb-topnav a { color: var(--stb-ink); text-decoration: none; padding: 4px 2px; }
.stb-topnav a:hover { color: var(--stb-rose); }

.stb-band, .stb-tintband, .stb-duskband { padding: var(--stb-breath) 0; }
.stb-tintband { background: var(--stb-blush); }
.stb-duskband {
  background: var(--stb-cocoa);
  --stb-body: #f0e7d9;
  --stb-head: var(--stb-creamtx);
  --stb-soft: #cdb9ab;
  --stb-kick: #dfb7c7;
  --stb-rule: #4f3b32;
  --stb-panel: #433028;
  --stb-link: var(--stb-creamtx);
  color: var(--stb-body);
}

.stb-kick {
  display: block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--stb-kick);
  margin: 0 0 11px;
}
.stb-lead { font-size: clamp(17px, 1.7vw, 19px); color: var(--stb-soft); max-width: 60ch; }
.stb-secthead { max-width: 68ch; margin: 0 0 32px; }
.stb-secthead p { color: var(--stb-soft); margin: 0; }

.stb-ctarow { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.stb-cta, .stb-ctaline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px;
  font: 600 15.5px/1 'Belanosima', sans-serif;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.stb-cta { background: var(--stb-rose); color: var(--stb-creamtx); }
.stb-cta:hover { background: var(--stb-rosedeep); color: var(--stb-creamtx); }
.stb-ctaline { border-color: var(--stb-rose); color: var(--stb-rosedeep); background: transparent; }
.stb-ctaline:hover { background: var(--stb-rose); color: var(--stb-creamtx); }
.stb-duskband .stb-ctaline { border-color: var(--stb-creamtx); color: var(--stb-creamtx); }
.stb-duskband .stb-ctaline:hover { background: var(--stb-creamtx); color: var(--stb-cocoa); }

.stb-hero { padding: clamp(36px, 4.8vw, 66px) 0 var(--stb-breath); }
.stb-hero > div { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 4.6vw, 60px); align-items: center; }
.stb-herocopy h1 { margin-bottom: 16px; }
.stb-heroart {
  border-radius: var(--stb-tilecurve); overflow: hidden;
  background: var(--stb-card); border: 1px solid var(--stb-rule);
  aspect-ratio: 4 / 3; min-height: 0; position: relative;
}
.stb-heroart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stb-herofacts {
  display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0;
  padding: 18px 0 0; border-top: 1px solid var(--stb-rule);
  font-size: 14.5px; color: var(--stb-soft);
}
.stb-herofacts b { display: block; font: 400 21px/1.25 'Mochiy Pop One', Verdana, sans-serif; color: var(--stb-head); }

.stb-railstrip { margin: var(--stb-breath) 0 0; }
.stb-railstrip h2 { font-size: 19px; margin-bottom: 16px; }
.stb-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.stb-railcard {
  display: flex; flex-direction: column; text-decoration: none; color: var(--stb-body);
  background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-curve); overflow: hidden; font-size: 13.5px;
}
.stb-railcard:hover { border-color: var(--stb-rose); }
.stb-railshot { display: block; aspect-ratio: 1 / 1; min-height: 0; position: relative; background: #ffffff; overflow: hidden; }
.stb-railshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.stb-railname { display: block; padding: 10px 12px 12px; line-height: 1.35; }

.stb-formgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stb-gutter); }
.stb-formtile {
  display: flex; flex-direction: column;
  background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-tilecurve); padding: 25px 23px;
  text-decoration: none; color: var(--stb-body);
}
.stb-formtile:hover { border-color: var(--stb-rose); }
.stb-formtile h3 { margin: 0 0 8px; }
.stb-formtile p { font-size: 14.5px; color: var(--stb-soft); margin: 0 0 14px; }
.stb-formtail { display: block; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--stb-link); }

.stb-stepwrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.8vw, 52px); align-items: start; }
.stb-steps { list-style: none; margin: 0; padding: 0; counter-reset: stbstep; }
.stb-steps li { counter-increment: stbstep; position: relative; padding: 0 0 0 58px; margin: 0 0 24px; }
.stb-steps li::before {
  content: counter(stbstep); position: absolute; left: 0; top: 2px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--stb-sage); color: var(--stb-creamtx);
  display: flex; align-items: center; justify-content: center;
  font: 400 19px/1 'Mochiy Pop One', Verdana, sans-serif;
}
.stb-steps h3 { margin: 0 0 6px; }
.stb-steps p { font-size: 15.5px; color: var(--stb-soft); margin: 0; }
.stb-fmtable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.stb-fmtable caption { text-align: left; font-weight: 600; padding: 0 0 10px; color: var(--stb-head); }
.stb-fmtable th, .stb-fmtable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--stb-rule); }
.stb-fmtable th { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stb-kick); }
.stb-fmtable td:first-child a { font-weight: 600; }

.stb-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stb-gutter); }
.stb-cattile {
  display: flex; flex-direction: column; text-decoration: none; color: var(--stb-body);
  background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-tilecurve); overflow: hidden;
}
.stb-cattile:hover { border-color: var(--stb-rose); }
.stb-catshot { display: block; aspect-ratio: 16 / 10; min-height: 0; position: relative; background: var(--stb-mist); }
.stb-catshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stb-catbody { display: block; padding: 16px 19px 19px; }
.stb-catname { display: block; font: 400 19px/1.26 'Mochiy Pop One', Verdana, sans-serif; color: var(--stb-head); margin: 0 0 4px; }
.stb-catcount { display: block; font-size: 14px; color: var(--stb-soft); }

.stb-shelfrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stb-gutter); }
.stb-shelfrow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stb-gutterwide); }
.stb-shelfrow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stb-gutter); }

.stb-buybox { display: flex; flex-direction: column; min-height: 0; }
.stb-buybox .stb-piece { flex: 1 1 auto; }
.stb-buyfoot { display: flex; padding: 10px 0 0; }
.stb-buyfoot .stb-pressgo { width: 100%; padding: 10px 16px; }

.stb-piece {
  display: flex; flex-direction: column;
  background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-tilecurve); overflow: hidden;
  text-decoration: none; color: var(--stb-body);
}
.stb-piece:hover { border-color: var(--stb-rose); }
.stb-pieceshot { display: block; aspect-ratio: 1 / 1; min-height: 0; position: relative; background: #ffffff; overflow: hidden; }
.stb-pieceshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px 14px; }
.stb-piecebody { padding: 14px 16px 17px; display: flex; flex-direction: column; flex: 1 1 auto; }
.stb-piecename { display: block; font-size: 15px; font-weight: 600; line-height: 1.36; margin: 0 0 8px; color: var(--stb-head); }
.stb-piecemeta { display: block; margin-top: auto; }
.stb-glow { color: var(--stb-star); letter-spacing: 0.05em; font-size: 13.5px; }
.stb-duskband .stb-glow { color: #e5b45a; }
.stb-votes { font-size: 13px; color: var(--stb-soft); }
.stb-cash { display: block; font: 400 18.5px/1.25 'Mochiy Pop One', Verdana, sans-serif; color: var(--stb-head); margin: 6px 0 0; }

.stb-pressgo {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stb-rose); border: 2px solid var(--stb-rose);
  border-radius: 999px; padding: 11px 24px; cursor: pointer;
}
.stb-pressgo:hover { background: var(--stb-rosedeep); border-color: var(--stb-rosedeep); }
.stb-pressgo img { width: 139px; height: 18px; }

.stb-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3.2vw, 40px); }
.stb-duocard {
  border-radius: var(--stb-tilecurve); overflow: hidden; padding: clamp(26px, 3.4vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.stb-duocard h2 { margin-bottom: 10px; }
.stb-duocard p { max-width: 46ch; margin: 0 0 20px; }
.stb-duodusk { background: var(--stb-cocoa); color: #f0e7d9;
  --stb-body: #f0e7d9; --stb-head: var(--stb-creamtx); --stb-soft: #cdb9ab;
  --stb-kick: #dfb7c7; --stb-link: var(--stb-creamtx); }
.stb-duoblush { background: var(--stb-blush); border: 1px solid var(--stb-rule); }
.stb-duocard p { color: var(--stb-soft); }
.stb-duocard .stb-cta { margin-top: auto; }

.stb-numline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 30px; }
.stb-numcell b { display: block; font: 400 clamp(26px, 3vw, 38px)/1.15 'Mochiy Pop One', Verdana, sans-serif; color: var(--stb-head); margin: 0 0 5px; }
.stb-numcell { font-size: 15px; color: var(--stb-soft); }

.stb-giftgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stb-gutter); margin: 0 0 30px; }
.stb-giftcard {
  background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-tilecurve); padding: 24px 22px;
}
.stb-giftcard h3 { margin: 0 0 8px; }
.stb-giftcard p { font-size: 15px; color: var(--stb-soft); margin: 0; }

.stb-vocab { margin: 0; }
.stb-vocab dt { font-weight: 700; margin: 20px 0 5px; color: var(--stb-head); }
.stb-vocab dd { margin: 0; color: var(--stb-soft); }

.stb-sendoff { text-align: center; }
.stb-sendoff h2 { margin-bottom: 12px; }
.stb-sendoff p { color: var(--stb-soft); max-width: 56ch; margin: 0 auto 6px; }
.stb-sendoff .stb-ctarow { justify-content: center; }

.stb-crumbs { font-size: 13.5px; color: var(--stb-soft); padding: 16px 0 0; }
.stb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 0; padding: 0; }
.stb-crumbs li { margin: 0; }
.stb-crumbs li + li::before { content: '\2192'; margin-right: 8px; color: var(--stb-rule); }
.stb-crumbs a { color: var(--stb-soft); text-decoration: none; }
.stb-crumbs a:hover { color: var(--stb-link); }

.stb-desknote { margin: 0; max-width: min(382px, 100%); opacity: 0.9; }

.stb-basement { background: var(--stb-cocoa); color: #f0e7d9; padding: 50px 0 28px;
  --stb-body: #f0e7d9; --stb-head: var(--stb-creamtx); --stb-soft: #cdb9ab;
  --stb-kick: #dfb7c7; --stb-rule: #4f3b32; --stb-link: var(--stb-creamtx); }
.stb-basegrid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px 32px; }
.stb-basebrand img { width: 186px; height: 27px; margin: 0 0 15px; }
.stb-basebrand p { font-size: 14.5px; color: var(--stb-soft); max-width: 36ch; }
.stb-basehead { font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stb-kick); margin: 0 0 13px; }
.stb-baselist { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.stb-baselist li { margin: 0 0 8px; }
.stb-baselist a { color: #f0e7d9; text-decoration: none; }
.stb-baselist a:hover { color: #dfb7c7; }
.stb-baseline { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start;
  justify-content: space-between; margin: 38px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--stb-rule); font-size: 13.5px; color: var(--stb-soft); }
.stb-postrow { font-style: normal; margin: 0; }
.stb-plain .stb-postrow { margin: 14px 0 18px; line-height: 1.55; }

.stb-solo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: start;
  padding: 28px 0 var(--stb-breath); }
.stb-soloart { background: #ffffff; border: 1px solid var(--stb-rule); border-radius: var(--stb-tilecurve);
  aspect-ratio: 1 / 1; min-height: 0; position: relative; overflow: hidden; }
.stb-soloart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px 24px; }
.stb-solocopy h1 { font-size: clamp(24px, 2.9vw, 33px); margin-bottom: 11px; }
.stb-solorate { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; }
.stb-cashbox { border-top: 1px solid var(--stb-rule); border-bottom: 1px solid var(--stb-rule);
  padding: 18px 0; margin: 0 0 22px; }
.stb-cashbig { display: block; font: 400 29px/1.15 'Mochiy Pop One', Verdana, sans-serif; color: var(--stb-head); margin: 0 0 5px; }
.stb-cashnote { font-size: 13px; color: var(--stb-soft); margin: 0; max-width: 48ch; }
.stb-solointro { font-size: 16.5px; }
.stb-pointlist { list-style: none; margin: 0 0 24px; padding: 0; }
.stb-pointlist li { position: relative; padding-left: 25px; margin: 0 0 10px; font-size: 15.5px; }
.stb-pointlist li::before { content: ''; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--stb-sage); }
.stb-lastcash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; background: var(--stb-blush); border-radius: var(--stb-tilecurve); padding: 24px 28px; }
.stb-lastcash p { margin: 0; }
.stb-lastband { padding: 0 0 var(--stb-breath); }

.stb-pagetop { padding: 32px 0 28px; }
.stb-pagetop h1 { margin-bottom: 11px; }
.stb-pagetop p { color: var(--stb-soft); max-width: 66ch; margin: 0; }

.stb-notegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--stb-gutterwide); }
.stb-notecard { display: flex; flex-direction: column; background: var(--stb-panel);
  border: 1px solid var(--stb-rule); border-radius: var(--stb-tilecurve);
  padding: 27px 25px; text-decoration: none; color: var(--stb-body); }
.stb-notecard:hover { border-color: var(--stb-rose); }
.stb-notetag { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stb-kick); margin: 0 0 11px; }
.stb-notecard h2 { font-size: 20.5px; margin: 0 0 10px; }
.stb-notecard p { color: var(--stb-soft); font-size: 15px; margin: 0; }

.stb-longform { padding: 6px 0 var(--stb-breath); }
.stb-longform h2 { margin: 36px 0 13px; }
.stb-longform h3 { margin: 24px 0 9px; }
.stb-longform p, .stb-longform li { font-size: 17px; }
.stb-longform ul { padding-left: 19px; }

.stb-plain { padding: 6px 0 var(--stb-breath); }
.stb-plain h2 { margin: 32px 0 11px; }
.stb-plain h3 { margin: 22px 0 8px; }

.stb-drawerform { background: var(--stb-panel); border: 1px solid var(--stb-rule);
  border-radius: var(--stb-tilecurve); padding: clamp(24px, 3.1vw, 36px); margin: 0 0 38px; }
.stb-askset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.stb-askset:last-of-type { margin-bottom: 0; }
.stb-asklabel { font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stb-kick); padding: 0; margin: 0 0 11px; }
.stb-picks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.stb-picks label { display: inline-flex; }
.stb-picks input { position: absolute; opacity: 0; width: 0; height: 0; }
.stb-pill { display: inline-flex; align-items: center; padding: 9px 19px; border-radius: 999px;
  border: 2px solid var(--stb-rule); font-size: 14.5px; cursor: pointer; background: var(--stb-paper); }
.stb-picks input:checked + .stb-pill { border-color: var(--stb-rose);
  background: var(--stb-rose); color: var(--stb-creamtx); }
.stb-picks input:focus-visible + .stb-pill { outline: 3px solid var(--stb-lilac); outline-offset: 2px; }
.stb-drawernote { font-size: 15.5px; color: var(--stb-soft); background: var(--stb-blush);
  border-radius: var(--stb-curve); padding: 15px 19px; margin: 0 0 24px; }

.stb-offpage { text-align: center; padding: clamp(52px, 7.5vw, 100px) 0; }
.stb-offpage .stb-ctarow { justify-content: center; }

@media (max-width: 1020px) {
  .stb-formgrid, .stb-numline { grid-template-columns: repeat(2, 1fr); }
  .stb-catgrid, .stb-giftgrid, .stb-shelfrow, .stb-shelfrow3 { grid-template-columns: repeat(2, 1fr); }
  .stb-shelfrow4 { grid-template-columns: repeat(2, 1fr); }
  .stb-rail { grid-template-columns: repeat(3, 1fr); }
  .stb-basegrid { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
}

@media (max-width: 830px) {
  .stb-hero > div, .stb-stepwrap, .stb-solo, .stb-duo, .stb-notegrid { grid-template-columns: 1fr; }
  .stb-heroart { aspect-ratio: 16 / 10; }
  .stb-topbar { position: static; }
  .stb-topbar > div { flex-wrap: wrap; gap: 11px 19px; }
  .stb-topnav { margin-left: 0; width: 100%; font-size: 14.5px; }
}

@media (max-width: 570px) {
  .stb-room, .stb-aisle { width: calc(100% - 32px); }
  .stb-formgrid, .stb-catgrid, .stb-giftgrid, .stb-shelfrow, .stb-shelfrow3, .stb-shelfrow4,
  .stb-numline, .stb-basegrid { grid-template-columns: 1fr; }
  .stb-rail { grid-template-columns: repeat(2, 1fr); }
  .stb-basegrid { gap: 24px; }
  .stb-ctarow { flex-direction: column; align-items: stretch; }
  .stb-cta, .stb-ctaline { width: 100%; }
  .stb-lastcash { flex-direction: column; align-items: flex-start; }
  .stb-herofacts { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px; }
  .stb-fmtable th, .stb-fmtable td { padding: 8px 8px; }
}