/* Fiddleback: every section a pair about one seam, left foot and right foot */
@font-face { font-family: "Vollkorn"; src: url("/assets/fonts/specimen/vollkorn-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("/assets/fonts/specimen/vollkorn-var-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@property --fb-pair { syntax: "<number>"; inherits: true; initial-value: 0.3; }

body.spec-fiddleback { margin: 0; background: #EDE3CE; }
.fb-page {
  --fb-beech: #EDE3CE; --fb-ink: #1A120C; --fb-oxblood: #6B1F24; --fb-black: #111111;
  --fb-beech-deep: #E2D4B6; --fb-lining: #F5EEDF; --fb-hair: rgba(26, 18, 12, .22);
  --fb-serif: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fb-g: clamp(16px, 4vw, 64px); --fb-gap: clamp(48px, 7vw, 112px);
  --fb-mid: clamp(340px, 46vw, 660px); --fb-sw: clamp(300px, 40vw, 580px); --fb-e: calc((var(--fb-mid) - var(--fb-sw)) / 2);
  --fb-cvh: clamp(300px, min(51svh, 40vw), 460px);
  --fb-cvw: clamp(560px, 58.4vw, 840px);
  --fb-h1: clamp(2.1rem, min(5.4vw, 9.5svh), 5.25rem);
  --fb-pc: clamp(300px, 25vw, 380px); --fb-pvh: clamp(180px, min(50svh, 35vw), 520px);
  --fb-pair: .3; --fb-pad: clamp(64px, 8.5vw, 124px);
  transition: --fb-pair .6s cubic-bezier(.3, 0, .2, 1);
  position: relative; background: var(--fb-beech); color: var(--fb-ink);
  font-family: var(--fb-serif); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  font-variant-numeric: oldstyle-nums proportional-nums; word-spacing: .05em; overflow-x: clip;
}
.fb-page *, .fb-page *::before, .fb-page *::after { box-sizing: border-box; }
.fb-page a { color: inherit; }
.fb-page :focus-visible { outline: 2px solid var(--fb-oxblood); outline-offset: 3px; }
:where(.fb-page) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.fb-page) :where(ul, ol) { padding: 0; list-style: none; }
.fb-page img { display: block; max-width: 100%; height: auto; }

/* the seam: one solid line, the page's one fixed line */
.fb-seam { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--fb-oxblood); pointer-events: none; }

/* ── nav ─────────────────────────────────────────────────────────── */
.fb-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: 60px; background: var(--fb-beech); border-bottom: 1px solid var(--fb-hair); }
.fb-nav-in { height: 100%; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 36px); padding: 0 var(--fb-g); }
.fb-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.fb-mark-svg { display: block; flex: none; }
.fb-brand-name { font-weight: 900; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1; color: var(--fb-black); }
.fb-links { display: flex; gap: clamp(14px, 2.2vw, 32px); }
.fb-links a { font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none; padding: 10px 0; }
.fb-links a:hover { color: var(--fb-oxblood); }
.fb-nav-cta, .fb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; background: var(--fb-oxblood); color: var(--fb-beech) !important; font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none; border: 0; border-radius: 0; font-family: inherit; cursor: pointer; transition: background .2s; }
.fb-nav-cta:hover, .fb-btn:hover { background: var(--fb-black); }
@media (max-width: 759px) { .fb-links { display: none; } }
@media (max-width: 360px) { .fb-brand-name { font-size: 1.1rem; } .fb-brand { gap: 8px; } .fb-nav-cta { padding: 0 14px; } }

/* ── hero: the pair ──────────────────────────────────────────────── */
.fb-hero {
  position: relative; display: grid;
  grid-template-columns: var(--fb-g) 1fr var(--fb-pc) 1fr var(--fb-g);
  grid-template-rows: auto 0 auto auto; align-content: start;
  padding-bottom: 56px;
}
.fb-pairgl { grid-row: 1; grid-column: 1 / -1; position: relative; width: min(100%, 1560px); height: var(--fb-pvh); justify-self: center; z-index: 2; }
.fb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fb-poster { position: absolute; inset: 20px var(--fb-g) 0; overflow: hidden; }
.fb-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.fb-gl .fb-pairgl .fb-poster { display: none; }
.fb-hero > .fb-bench { grid-row: 2; grid-column: 2 / 5; height: 1.5px; background: var(--fb-black); align-self: start; position: relative; z-index: 1; }

.fb-h1 {
  grid-row: 3; grid-column: 1 / -1; align-self: start; z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: var(--fb-g) 1fr var(--fb-pc) 1fr var(--fb-g);
  font-size: var(--fb-h1); line-height: .92; color: var(--fb-black); font-weight: 900; letter-spacing: -.02em;
  margin-top: 26px;
}
.fb-h1 > span { display: block; pointer-events: auto; }
.fb-h1-l { grid-column: 2; justify-self: end; text-align: right; margin-right: clamp(8px, 1.4vw, 24px); animation: fb-settle .9s cubic-bezier(.2, .7, .1, 1) both; }
.fb-h1-r { grid-column: 4; justify-self: start; margin-left: clamp(8px, 1.4vw, 24px); font-style: italic; font-weight: 520; font-size: .9em; letter-spacing: -.01em; animation: fb-settle .9s .14s cubic-bezier(.3, .6, .25, 1) both; }
@keyframes fb-settle { from { transform: translateY(12px); opacity: 0; } }

/* the punch set: folds left of the seam, the setting right of it, the punch on the seam */
.fb-punchset { grid-row: 3; grid-column: 3; align-self: start; position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 12px; margin-top: 30px; }
.fb-page:not(.fb-js) .fb-punchset, .fb-nogl .fb-punchset { display: none; }
.fb-punchset .fb-rng { width: auto; }
.fb-punchset .fb-rng-t { color: var(--fb-ink); }
.fb-punchset .fb-rng input::-webkit-slider-runnable-track { background: var(--fb-black); }
.fb-punchset .fb-rng input::-moz-range-track { background: var(--fb-black); }
.fb-punchset .fb-rng input::-webkit-slider-thumb { background: var(--fb-lining); border-color: var(--fb-oxblood); }
.fb-punchset .fb-rng input::-moz-range-thumb { background: var(--fb-lining); border-color: var(--fb-oxblood); }
.fb-punchset .fb-rng input:focus-visible { outline-color: var(--fb-oxblood); }
.fb-punch { grid-column: 1 / -1; justify-self: center; box-shadow: 0 0 0 4px var(--fb-beech); }
.fb-punchset .fb-hint { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 23em; font-style: italic; font-size: .875rem; line-height: 1.4; color: var(--fb-ink); background: var(--fb-beech); padding: 2px 8px; }

.fb-intro-l { grid-row: 4; grid-column: 2; justify-self: end; max-width: 21em; margin: 40px clamp(8px, 1.4vw, 24px) 0 0; }
.fb-lede { font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 1.45; margin-bottom: 22px; }
.fb-intro-r { grid-row: 4; grid-column: 4; justify-self: start; max-width: 21em; margin: calc(40px + .6lh) 0 0 clamp(8px, 1.4vw, 24px); }
.fb-intro-l p, .fb-intro-r p { text-wrap: pretty; }
.fb-mirror { font-style: italic; font-weight: 420; color: var(--fb-oxblood); font-size: clamp(1.15rem, 1.8vw, 1.75rem); line-height: 1.2; margin-bottom: 12px; }
.fb-lede-r { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.45; margin-bottom: 14px; }
.fb-gimp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--fb-oxblood); padding-bottom: 4px; background: linear-gradient(135deg, transparent 50%, var(--fb-oxblood) 50%) 0 100% / 8px 4px repeat-x, linear-gradient(225deg, transparent 50%, var(--fb-oxblood) 50%) 4px 100% / 8px 4px repeat-x; }
.fb-gimp:hover { color: var(--fb-black); }
.fb-arr { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }

/* ── the measuring last, at the fitting ──────────────────────────── */
.fb-measure {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: var(--fb-g) 1fr var(--fb-e) var(--fb-sw) var(--fb-e) 1fr var(--fb-g);
  grid-template-rows: calc(var(--fb-cvh) + 8px) 0 auto auto; align-content: start;
  margin-top: clamp(24px, 4vw, 56px);
}
.fb-last { grid-row: 1; grid-column: 1 / -1; justify-self: center; align-self: end; position: relative; width: min(100%, var(--fb-cvw)); height: var(--fb-cvh); z-index: 2; }
.fb-last .fb-poster { inset: 24px max(0px, calc(50% - var(--fb-mid) / 2 + 40px)) 0; }
.fb-last .fb-poster img { object-position: 50% 45%; }
.fb-measure.is-gl .fb-poster { display: none; }
.fb-tapes-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.fb-tapes-svg path { fill: none; stroke: var(--fb-oxblood); stroke-width: 4; stroke-linecap: butt; stroke-linejoin: round; opacity: .9; transition: stroke-width .2s; }
.fb-tapes-svg path.is-on { stroke-width: 5; opacity: 1; }
.fb-measure.is-gl .fb-tapes-svg { display: block; }

.fb-mark { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; cursor: grab; touch-action: none; display: none; z-index: 3; }
.fb-measure.is-gl .fb-mark { display: block; }
.fb-mark::before { content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #b99a5b 0 3px, var(--fb-black) 3.5px); box-shadow: 0 0 0 2px var(--fb-beech); transition: transform .2s; }
.fb-mark:hover::before, .fb-mark:focus-visible::before, .fb-mark.is-drag::before { transform: scale(1.2); }
.fb-mark:focus-visible { outline: none; }
.fb-mark:focus-visible::before { box-shadow: 0 0 0 2px var(--fb-beech), 0 0 0 4px var(--fb-oxblood); }
.fb-mark.is-drag { cursor: grabbing; }
.fb-mv { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-style: italic; font-weight: 500; font-size: 1rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--fb-black); pointer-events: none; text-shadow: 0 0 6px var(--fb-beech), 0 0 3px var(--fb-beech); }
.fb-mark.is-l .fb-mv { left: auto; right: 40px; }
#fb-m-spring .fb-mv, #fb-m-spring.is-l .fb-mv { left: 50%; right: auto; top: 44px; transform: translateX(-50%); }

.fb-measure > .fb-bench { grid-row: 2; grid-column: 2 / 7; height: 1.5px; background: var(--fb-black); align-self: start; z-index: 1; position: relative; }
.fb-feet { grid-row: 2 / 4; grid-column: 4; justify-self: center; align-self: start; display: flex; gap: 0; margin-top: -21px; z-index: 4; }
.fb-foot { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fb-oxblood); color: var(--fb-beech); font: italic 600 .8125rem/1 var(--fb-serif); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .25s, transform .25s; box-shadow: 0 0 0 3px var(--fb-beech); }
.fb-foot + .fb-foot { margin-left: 4px; }
.fb-foot[aria-pressed="true"] { background: var(--fb-black); }
.fb-foot:hover { transform: translateY(-2px); }

.fb-soles { grid-row: 3; grid-column: 4; position: relative; margin-top: 30px; width: 100%; aspect-ratio: 640 / 124; }
.fb-soles-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.fb-sole { fill: var(--fb-oxblood); }
.fb-sole-o { fill: none; stroke: var(--fb-black); stroke-width: 2; vector-effect: non-scaling-stroke; }

.fb-measure .fb-hint { grid-row: 4; grid-column: 4; justify-self: center; text-align: center; max-width: 25em; margin-top: 18px; font-style: italic; font-size: .875rem; line-height: 1.4; color: var(--fb-ink); background: var(--fb-beech); position: relative; z-index: 1; padding: 2px 8px; }
.fb-page:not(.fb-js) .fb-hint { display: none; }

/* the tapes as tabs and a range: phones, and wherever the last cannot be drawn */
.fb-tapes { grid-row: 4; grid-column: 4; display: none; margin-top: 16px; position: relative; z-index: 1; }
.fb-measure.is-nogl .fb-tapes { display: block; }
.fb-measure.is-nogl .fb-hint { display: none; }
.fb-tabs { display: flex; gap: 2px; }
.fb-tabs button { flex: 1; min-height: 44px; min-width: 0; padding: 0 4px; border: 0; background: var(--fb-oxblood); color: var(--fb-beech); font: italic 600 .9375rem/1 var(--fb-serif); cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); opacity: .72; transition: opacity .2s; }
.fb-tabs button[aria-pressed="true"] { opacity: 1; background: var(--fb-black); }
.fb-range { display: block; margin-top: 10px; }
.fb-range-l { display: block; font-style: italic; font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.fb-range-v { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.fb-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.fb-range input::-webkit-slider-runnable-track { height: 18px; background: linear-gradient(90deg, rgba(237, 227, 206, .55) 1px, transparent 1px) 0 0 / 8px 7px no-repeat, linear-gradient(90deg, rgba(237, 227, 206, .55) 1px, transparent 1px) 0 0 / 8px 7px repeat-x, var(--fb-oxblood); }
.fb-range input::-moz-range-track { height: 18px; background: var(--fb-oxblood); }
.fb-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 30px; margin-top: -6px; background: var(--fb-black); border: 0; border-radius: 0; }
.fb-range input::-moz-range-thumb { width: 8px; height: 30px; background: var(--fb-black); border: 0; border-radius: 0; }

/* beside the soles: why we measure on the left; the measure in hand on the right */
.fb-ms-l { grid-row: 3 / 6; grid-column: 2 / 4; justify-self: end; max-width: 19em; margin: 30px clamp(20px, 2.4vw, 40px) 0 0; font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 1.45; text-align: right; text-wrap: pretty; }
.fb-notes { grid-row: 3 / 6; grid-column: 5 / 7; justify-self: start; max-width: 19em; margin: 30px 0 0 clamp(20px, 2.4vw, 40px); position: relative; z-index: 1; font-style: italic; font-weight: 450; font-size: 1rem; line-height: 1.4; }
.fb-note { margin: 0 0 8px; }
.fb-note b { font-weight: 700; }
.fb-nv { font-variant-numeric: lining-nums tabular-nums; }
.fb-js .fb-note { display: none; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.3; }
.fb-js .fb-note b { font-style: normal; font-weight: 900; color: var(--fb-black); }
.fb-js .fb-note .fb-nv { color: var(--fb-oxblood); }
.fb-js .fb-note.is-on { display: block; }


/* ── the pair, sections 2–9 ──────────────────────────────────────── */
.fb-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fb-sec { position: relative; padding: var(--fb-pad) 0; --fb-h2: clamp(2.1rem, 4.4vw, 4.25rem); }
.fb-sec > .fb-seam, .fb-seam { z-index: 0; }
.fb-pairset { display: grid; grid-template-columns: [full-start] var(--fb-g) [l-start] 1fr [l-end] var(--fb-gap) [r-start] 1fr [r-end] var(--fb-g) [full-end]; position: relative; z-index: 1; }
.fb-l { grid-column: l; justify-self: end; width: min(100%, 34em); }
.fb-r { grid-column: r; justify-self: start; width: min(100%, 31.3em); }
.fb-page h2 { font-weight: 900; font-size: var(--fb-h2); line-height: .95; letter-spacing: -.015em; color: var(--fb-black); margin-bottom: 28px; text-wrap: balance; }
.fb-echo { font-style: italic; font-size: calc(var(--fb-h2) * .62); line-height: 1.05; font-weight: calc(760 - 200 * var(--fb-pair)); letter-spacing: -.005em; color: var(--fb-black); margin: calc(var(--fb-h2) * .57) 0 28px; text-wrap: balance; }
.fb-l > p, .fb-r > p { text-wrap: pretty; }
.fb-l > p + p, .fb-r > p + p { margin-top: 1em; }
.fb-head .fb-l h2, .fb-head .fb-echo { margin-bottom: 0; }

/* the seam's punch runs: drawn in, one hole at a time */
.fb-run { position: absolute; left: 50%; top: var(--fb-rt, var(--fb-pad)); width: 24px; height: 140px; margin-left: -12px; display: block; }

/* split photographs: one picture cut at the seam and set back out of true */
.fb-split { position: relative; z-index: 1; }
.fb-halves { display: flex; gap: var(--fb-cut, 14px); }
.fb-half { flex: 1 1 0; min-width: 0; overflow: hidden; height: var(--fb-sh, clamp(300px, 50vw, 720px)); }
.fb-half picture { display: block; height: 100%; transition: translate .5s cubic-bezier(.2, .7, .1, 1); }
.fb-half img { width: calc(200% + var(--fb-cut, 14px)); max-width: none; height: 100%; object-fit: cover; }
.fb-half-r picture { transform: translateY(10px) scale(1.03); transform-origin: 0 50%; }
.fb-half-r img { margin-left: calc(-100% - var(--fb-cut, 14px)); }
.fb-split.fb-pre .fb-half-l picture { translate: -20px 0; }
.fb-split.fb-pre .fb-half-r picture { translate: 20px 0; }
.fb-caps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 18px; font-style: italic; font-weight: 450; font-size: 1rem; line-height: 1.4; }
.fb-cap-l { text-align: right; justify-self: end; max-width: 26em; }
.fb-cap-r { justify-self: start; max-width: 24em; margin-top: 10px; }

/* 2 · two lasts: the oxblood band */
.fb-lasts { padding-top: 0; }
.fb-band { background: var(--fb-oxblood); color: var(--fb-beech); padding: 56px 0 44px; margin-bottom: clamp(64px, 9vw, 128px); position: relative; }
.fb-band .fb-seam-k { background: var(--fb-black); z-index: 2; --fb-rt: 20px; }
.fb-band .fb-caps { position: relative; z-index: 1; }

/* 3 · the fitting: the tracings, the marks, the notes */
.fb-fitting { --fb-fdh: clamp(520px, 56vw, 780px); }
.fb-fit-stage { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 56px auto 1fr; padding: 96px var(--fb-g) 80px; margin-top: 24px; }
.fb-fitd { position: relative; height: var(--fb-fdh); aspect-ratio: 164 / 416; }
.fb-fitd-l { grid-column: 2; anchor-name: --fb-fit-dl; }
.fb-fitd-r { grid-column: 4; anchor-name: --fb-fit-dr; }
.fb-fit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fb-fp { fill: var(--fb-beech); stroke: var(--fb-black); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fb-fitd-l .fb-fp { fill: #F2EADA; }
.fb-fo { fill: none; stroke: var(--fb-oxblood); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fb-fg, .fb-fd, .fb-fb { fill: none; stroke: var(--fb-ink); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fb-fb { stroke-opacity: .9; stroke-width: 1.5; }
.fb-fpr { fill: #E4CFA6; stroke: var(--fb-black); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fb-fit-pts { position: absolute; inset: 0; }
.fb-fit-mark, .fb-fit-pt { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.fb-fit-mark::before, .fb-fit-pt::before { content: ""; position: absolute; left: 15px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--fb-oxblood); box-shadow: 0 0 0 2.5px var(--fb-beech); transition: transform .2s, background .2s; }
.fb-fit-pt::before { left: 16px; top: 16px; width: 12px; height: 12px; }
.fb-fit-mark.is-on::before, .fb-fit-pt.is-on::before, .fb-fit-mark:hover::before, .fb-fit-mark:focus-visible::before { background: var(--fb-black); transform: scale(1.25); }
.fb-fit-mark:focus-visible { outline: none; }
.fb-fit-mark:focus-visible::before { box-shadow: 0 0 0 2.5px var(--fb-beech), 0 0 0 4.5px var(--fb-oxblood); }
#fb-fit-len { anchor-name: --fb-fl-len; } #fb-fit-ball { anchor-name: --fb-fl-ball; } #fb-fit-joint { anchor-name: --fb-fl-joint; } #fb-fit-waist { anchor-name: --fb-fl-waist; } #fb-fit-instep { anchor-name: --fb-fl-instep; } #fb-fit-heel { anchor-name: --fb-fl-heel; } #fb-fit-spring { anchor-name: --fb-fl-spring; }
#fb-fitr-len { anchor-name: --fb-fr-len; } #fb-fitr-ball { anchor-name: --fb-fr-ball; } #fb-fitr-joint { anchor-name: --fb-fr-joint; } #fb-fitr-waist { anchor-name: --fb-fr-waist; } #fb-fitr-instep { anchor-name: --fb-fr-instep; } #fb-fitr-heel { anchor-name: --fb-fr-heel; } #fb-fitr-spring { anchor-name: --fb-fr-spring; }

/* the notes: a list about the seam wherever they cannot be anchored */
.fb-fit-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--fb-gap); row-gap: 22px; margin-top: 56px; font-size: 1rem; line-height: 1.4; }
.fb-fn { display: contents; }
.fb-fn-l, .fb-fn-r { font-style: italic; transition: opacity .25s; }
.fb-fn-l { justify-self: end; text-align: right; max-width: 24em; }
.fb-fn-r { justify-self: start; max-width: 22em; }
.fb-fn b { display: block; font-style: normal; font-weight: 800; font-size: 1.0625rem; color: var(--fb-black); }
.fb-fn-r b { font-style: italic; font-weight: 600; }
.fb-fv { font-variant-numeric: lining-nums tabular-nums; }
.fb-fn-r .fb-fv { color: var(--fb-oxblood); }
.fb-fit-leads { display: none; pointer-events: none; }
.fb-fit-stage.has-on .fb-fn:not(.is-on) > p { opacity: .35; }
.fb-page .fb-aside { position: relative; z-index: 1; width: fit-content; max-width: min(30em, 100% - 2 * var(--fb-g)); margin: 0 auto; padding: 10px 16px; text-align: center; font-style: italic; font-size: 1.0625rem; line-height: 1.4; background: var(--fb-beech); }
.fb-fit-copy { margin-top: clamp(56px, 7vw, 96px); }
.fb-lead-p { font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 1.45; }
.fb-fit-copy .fb-l { padding-top: calc(var(--fb-h2) * .5); }
.fb-fit-photo { display: block; width: min(100%, 440px); margin: 0 0 28px; }
.fb-fit-photo img { width: 100%; }

@supports (anchor-name: --a) {
  @media (min-width: 700px) {
    .fb-fit-list { display: block; margin: 0; }
    .fb-fn { display: block; }
    .fb-fn-l, .fb-fn-r { position: absolute; margin: 0; max-width: 21em; font-size: .9375rem; line-height: 1.35; }
    .fb-fn-l { left: var(--fb-g); right: calc(anchor(--fb-fit-dl left) + 30px); }
    .fb-fn-r { left: calc(anchor(--fb-fit-dr right) + 30px); right: var(--fb-g); }
    .fb-up > p { bottom: calc(anchor(center) + 7px); }
    .fb-dn > p { top: calc(anchor(center) + 7px); }
    .fb-fn-l b, .fb-fn-r b { font-size: 1rem; }
    .fb-fit-leads { display: block; }
    .fb-ld { position: absolute; height: 1px; background: var(--fb-ink); opacity: .7; transition: opacity .25s; }
    .fb-ld-l { left: calc(anchor(--fb-fit-dl left) - 22px); right: anchor(center); top: anchor(center); }
    .fb-ld-r { left: anchor(center); right: calc(anchor(--fb-fit-dr right) - 22px); top: anchor(center); }
    .fb-fit-stage.has-on .fb-ld:not(.is-on) { opacity: .25; }
    [data-k="len"] > .fb-fn-l, .fb-ld-l[data-k="len"] { position-anchor: --fb-fl-len; } [data-k="len"] > .fb-fn-r, .fb-ld-r[data-k="len"] { position-anchor: --fb-fr-len; }
    [data-k="ball"] > .fb-fn-l, .fb-ld-l[data-k="ball"] { position-anchor: --fb-fl-ball; } [data-k="ball"] > .fb-fn-r, .fb-ld-r[data-k="ball"] { position-anchor: --fb-fr-ball; }
    [data-k="joint"] > .fb-fn-l, .fb-ld-l[data-k="joint"] { position-anchor: --fb-fl-joint; } [data-k="joint"] > .fb-fn-r, .fb-ld-r[data-k="joint"] { position-anchor: --fb-fr-joint; }
    [data-k="waist"] > .fb-fn-l, .fb-ld-l[data-k="waist"] { position-anchor: --fb-fl-waist; } [data-k="waist"] > .fb-fn-r, .fb-ld-r[data-k="waist"] { position-anchor: --fb-fr-waist; }
    [data-k="instep"] > .fb-fn-l, .fb-ld-l[data-k="instep"] { position-anchor: --fb-fl-instep; } [data-k="instep"] > .fb-fn-r, .fb-ld-r[data-k="instep"] { position-anchor: --fb-fr-instep; }
    [data-k="heel"] > .fb-fn-l, .fb-ld-l[data-k="heel"] { position-anchor: --fb-fl-heel; } [data-k="heel"] > .fb-fn-r, .fb-ld-r[data-k="heel"] { position-anchor: --fb-fr-heel; }
    [data-k="spring"] > .fb-fn-l, .fb-ld-l[data-k="spring"] { position-anchor: --fb-fl-spring; } [data-k="spring"] > .fb-fn-r, .fb-ld-r[data-k="spring"] { position-anchor: --fb-fr-spring; }
  }
  /* narrower screens: one pair of notes at a time, the one you point at (ball to begin) */
  @media (min-width: 700px) and (max-width: 1179px) and (prefers-reduced-motion: no-preference) {
    .fb-fn:not(.is-on) > p, .fb-ld:not(.is-on) { opacity: 0 !important; pointer-events: none; }
    .fb-fn.is-on > p { background: var(--fb-beech); }
  }
  @media (min-width: 700px) and (max-width: 1179px) and (prefers-reduced-motion: reduce) {
    .fb-fit-list, .fb-fn { display: grid; } .fb-fit-leads { display: none; }
  }
}

/* 4 · the walk: nine prints, left and right */
.fb-steps { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 88px); --fb-pw: 96px; --fb-ph: 260px; }
.fb-step { display: grid; grid-template-columns: var(--fb-g) 1fr 36px var(--fb-pw) 48px var(--fb-pw) 36px 1fr var(--fb-g); align-items: center; min-height: var(--fb-ph); }
.fb-step + .fb-step { margin-top: calc(var(--fb-ph) * -.46); }
.fb-step-ph, .fb-step-ph + .fb-step { margin-top: 48px !important; }
.fb-print { grid-row: 1; width: var(--fb-pw); height: var(--fb-ph); overflow: visible; }
.fb-sl .fb-print { grid-column: 4; rotate: 6deg; }
.fb-sr .fb-print { grid-column: 6; rotate: -6deg; }
#fb-sl, #fb-sr { vector-effect: non-scaling-stroke; }
.fb-po { fill: none; stroke: var(--fb-black); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .32s cubic-bezier(.3, 0, .2, 1) calc(var(--fb-i, 0) * 60ms); }
.fb-pf { fill: var(--fb-black); stroke: none; fill-opacity: .9; transition: fill-opacity .2s ease-out calc(var(--fb-i, 0) * 60ms + 260ms); }
.fb-step-end .fb-pf { fill: var(--fb-oxblood); fill-opacity: 1; }
.fb-step-end .fb-po { stroke: var(--fb-oxblood); }
.fb-step.fb-pre .fb-po { stroke-dashoffset: 1; }
.fb-step.fb-pre .fb-pf { fill-opacity: 0; }
.fb-step-t { grid-row: 1; max-width: 21em; }
.fb-sl .fb-step-t { grid-column: 2; justify-self: end; text-align: right; }
.fb-sr .fb-step-t { grid-column: 8; justify-self: start; }
.fb-step h3 { font-style: italic; font-weight: 650; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; letter-spacing: -.005em; color: var(--fb-black); margin: 0 0 8px; }
.fb-step-end h3 { color: var(--fb-oxblood); }
.fb-step p { text-wrap: pretty; }
.fb-step-photo { grid-row: 1; display: block; }
.fb-step-photo img { width: 100%; }
.fb-sr .fb-step-photo { grid-column: 2; justify-self: end; width: min(100%, 520px); }
.fb-sl .fb-step-photo { grid-column: 8; justify-self: start; width: min(100%, 360px); }
.fb-step-ph { align-items: start; }
.fb-step-ph .fb-step-t { padding-top: 48px; }

/* 5 · the toe cap: the field */
.fb-medallion { background: var(--fb-oxblood); color: var(--fb-beech); }
.fb-medallion > .fb-seam { background: var(--fb-black); }
.fb-medallion h2, .fb-medallion .fb-echo { color: var(--fb-beech); }
.fb-med { position: relative; z-index: 1; width: min(100% - 2 * var(--fb-g), 1180px); height: clamp(300px, 38vw, 540px); margin: clamp(40px, 5vw, 72px) auto 0; }
.fb-med-cv, .fb-med-fb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fb-med-on .fb-med-fb { display: none; }
.fb-mc { fill: var(--fb-black); }
.fb-mh circle { fill: var(--fb-lining); stroke: #3a2b27; stroke-width: 1; }
.fb-med-ctl { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 22px; margin: 32px 0 0; padding: 0 var(--fb-g); }
.fb-med-ctl .fb-rng:first-child { justify-self: end; }
.fb-med-ctl .fb-btn-o { grid-column: 1 / -1; justify-self: center; background: var(--fb-oxblood); }
.fb-page:not(.fb-js) .fb-med-ctl { display: none; }
.fb-rng { display: grid; gap: 4px; width: 200px; }
.fb-rng-t { display: flex; justify-content: space-between; font-style: italic; font-size: .9375rem; line-height: 1.3; }
.fb-rng-v { font-style: normal; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.fb-rng input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.fb-rng input::-webkit-slider-runnable-track { height: 2px; background: var(--fb-beech); }
.fb-rng input::-moz-range-track { height: 2px; background: var(--fb-beech); }
.fb-rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--fb-beech); border: 5px solid var(--fb-black); }
.fb-rng input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fb-beech); border: 5px solid var(--fb-black); }
.fb-rng input:focus-visible { outline: 2px solid var(--fb-beech); outline-offset: 2px; }
.fb-btn-o { min-height: 44px; padding: 0 22px; background: transparent; color: var(--fb-beech); border: 1.5px solid var(--fb-beech); border-radius: 0; font: 700 1rem/1 var(--fb-serif); letter-spacing: .01em; cursor: pointer; transition: background .2s, color .2s; }
.fb-btn-o:hover { background: var(--fb-beech); color: var(--fb-oxblood); }
.fb-btn-o:focus-visible { outline: 2px solid var(--fb-beech); outline-offset: 3px; }

/* 6 · leathers, plainly: type only */
.fb-leathers .fb-head { margin-bottom: clamp(32px, 5vw, 64px); }
.fb-lth-h { font-style: italic; font-size: 1.0625rem; color: var(--fb-oxblood); margin-bottom: 12px; }
.fb-leathers .fb-l .fb-lth-h { text-align: right; }
.fb-lth li { padding: 0 0 26px; }
.fb-lth b, .fb-lth i { display: block; font-size: clamp(1.85rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.012em; color: var(--fb-black); margin-bottom: 8px; }
.fb-lth b { font-weight: 900; }
.fb-lth i { font-weight: 600; }
.fb-lth-l li { text-align: right; }
.fb-lth-l li, .fb-lth-r li { text-wrap: pretty; }
.fb-rule { display: block; width: 64px; height: 12px; margin: 0 0 22px; border-top: 1px solid var(--fb-hair); }
.fb-lth-l .fb-rule { margin-left: auto; }
.fb-rule.is-punched { border: 0; }
.fb-rule svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fb-rule circle { fill: var(--fb-oxblood); }

/* 7 · resoling */
.fb-page .fb-split-resole { width: min(100% - 2 * var(--fb-g), 1240px); margin: 0 auto clamp(56px, 7vw, 96px); --fb-sh: clamp(260px, 40vw, 600px); }
.fb-punch-list { margin: 4px 0 20px; }
.fb-punch-list li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.fb-punch-list li::before { content: ""; position: absolute; left: calc(7px - var(--fb-b, 8px) / 2); top: calc(.8em - var(--fb-b, 8px) / 2); width: var(--fb-b, 8px); height: var(--fb-b, 8px); border-radius: 50%; background: var(--fb-oxblood); }
.fb-resole-note { font-style: italic; }

/* 8 · two shoes, unbroken */
.fb-pair { padding: 0; }
.fb-pair-top { position: relative; padding: var(--fb-pad) 0 96px; }
.fb-pair-bot { position: relative; padding: 96px 0 calc(var(--fb-pad) * .5); }
.fb-seam-stop { bottom: 48px; }
.fb-seam-go { top: 48px; }
.fb-seam-stop::after, .fb-seam-go::before { content: ""; position: absolute; left: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--fb-lining); box-shadow: inset 0 2px 0 rgba(17, 17, 17, .25), 0 0 0 3px var(--fb-oxblood); }
.fb-seam-stop::after { bottom: -10px; }
.fb-seam-go::before { top: -10px; }
.fb-pair-photo { display: block; position: relative; z-index: 1; overflow: hidden; }
.fb-pair-photo img { width: 100%; }
.fb-pair-lines p { font-style: italic; font-weight: 450; font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1.2; color: var(--fb-oxblood); text-wrap: balance; }
.fb-pair-lines .fb-l { text-align: right; }
.fb-pair-lines .fb-r { margin-top: .6lh; }

/* 9 · come in, and the end of the seam */
.fb-come { padding-bottom: 0; }
.fb-come-body { position: relative; padding-bottom: 72px; }
.fb-come-body > .fb-seam { top: calc(-1 * var(--fb-pad)); bottom: -40px; }
.fb-form { background: var(--fb-beech-deep); padding: clamp(22px, 3vw, 40px); display: grid; gap: 22px; margin-top: 4px; }
.fb-f { display: grid; gap: 2px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fb-f > span, .fb-f legend { font-style: italic; font-size: .9375rem; line-height: 1.3; padding: 0; }
.fb-f input[type="text"], .fb-f select, .fb-f textarea { font: inherit; font-size: 1.0625rem; color: var(--fb-ink); background: transparent; border: 0; border-bottom: 1px solid rgba(26, 18, 12, .4); border-radius: 0; padding: 8px 0 6px; min-height: 44px; width: 100%; }
.fb-f textarea { resize: vertical; min-height: 88px; }
.fb-f ::placeholder { color: rgba(26, 18, 12, .56); font-style: italic; }
.fb-f input[type="text"]:focus, .fb-f select:focus, .fb-f textarea:focus { outline: none; border-bottom: 2px solid var(--fb-oxblood); padding-bottom: 5px; }
.fb-f small, .fb-add-h { font-style: italic; font-size: .875rem; line-height: 1.4; }
.fb-radios legend { margin-bottom: 6px; }
.fb-radios label, .fb-check { display: flex; align-items: center; gap: 12px; min-height: 40px; line-height: 1.3; cursor: pointer; }
.fb-radios input, .fb-check input { accent-color: var(--fb-oxblood); width: 20px; height: 20px; margin: 0; flex: none; }
.fb-add { gap: 6px; }
.fb-add-v { font-style: italic; font-variant-numeric: lining-nums tabular-nums; padding: 8px 0 4px 32px; line-height: 1.45; color: var(--fb-oxblood); }
.fb-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fb-send { min-width: 150px; position: relative; }
.fb-send::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 4px; background: linear-gradient(135deg, transparent 50%, var(--fb-oxblood) 50%) 0 0 / 8px 4px repeat-x, linear-gradient(225deg, transparent 50%, var(--fb-oxblood) 50%) 4px 0 / 8px 4px repeat-x; }
.fb-status { font-style: italic; min-height: 1.4em; flex: 1 1 14em; }
.fb-end { position: relative; z-index: 1; display: grid; justify-items: center; padding: 0 0 clamp(56px, 7vw, 88px); }
.fb-rosette { display: block; width: 80px; height: 80px; border-radius: 50%; background: var(--fb-beech); }
.fb-end-pair { width: 100%; display: grid; grid-template-columns: [full-start] var(--fb-g) [l-start] 1fr [l-end] var(--fb-gap) [r-start] 1fr [r-end] var(--fb-g); margin-top: 18px; }
.fb-end-l { grid-column: l; justify-self: end; display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.01em; line-height: 1; color: var(--fb-black); }
.fb-end-r { grid-column: r; justify-self: start; max-width: 22em; margin-top: .5lh; font-style: italic; font-size: 1rem; line-height: 1.4; }

/* pairs arrive a step apart, outward from the seam: left first, right 140ms later on its own curve */
.fb-pairset > .fb-l { transition: opacity .3s ease-out, translate .45s cubic-bezier(.2, .7, .1, 1); }
.fb-pairset > .fb-r { transition: opacity .3s ease-out .1s, translate .45s cubic-bezier(.3, .6, .25, 1) .1s; }
.fb-pairset.fb-pre > .fb-l { opacity: 0; translate: 24px 0; }
.fb-pairset.fb-pre > .fb-r { opacity: 0; translate: -16px 0; }
/* ── widths ──────────────────────────────────────────────────────── */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) { .fb-hero { min-height: calc(100svh - 100px); } }
@media (max-width: 1100px) and (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .fb-page { --fb-sw: min(560px, 68vw); --fb-e: 0px; --fb-cvh: clamp(300px, 50vw, 480px); --fb-cvw: 100%; --fb-h1: clamp(3rem, 7.6vw, 5rem); --fb-pvh: clamp(260px, 36vw, 400px); }
  .fb-hero { grid-template-columns: var(--fb-g) 1fr 28px 1fr var(--fb-g); }
  .fb-h1 { grid-template-columns: var(--fb-g) 1fr 28px 1fr var(--fb-g); }
  .fb-h1-l { margin-right: 0; } .fb-h1-r { margin-left: 0; }
  .fb-punchset { grid-row: 4; grid-column: 2 / 5; justify-self: center; width: min(100%, 460px); margin-top: 36px; }
  .fb-intro-l, .fb-intro-r { grid-row: 5; }
  .fb-intro-l { margin-right: 0; } .fb-intro-r { margin-left: 0; }
  .fb-measure { grid-template-columns: var(--fb-g) 1fr 0 var(--fb-sw) 0 1fr var(--fb-g); }
  .fb-feet { grid-row: 1; grid-column: 1 / -1; justify-self: stretch; align-self: end; justify-content: space-between; margin: 0 var(--fb-g) 16px; pointer-events: none; }
  .fb-foot { pointer-events: auto; }
  .fb-soles { grid-row: 3; margin-top: 40px; }
  .fb-measure .fb-hint, .fb-tapes { grid-row: 4; }
  .fb-ms-l, .fb-notes { grid-row: 5; grid-column: 1 / -1; max-width: none; width: calc(50% - var(--fb-g) - 28px); margin-top: 40px; }
  .fb-ms-l { justify-self: start; margin-left: var(--fb-g); margin-right: 0; }
  .fb-notes { justify-self: end; margin-right: var(--fb-g); margin-left: 0; margin-top: calc(40px + .6lh); }
}
@media (max-width: 759px) {
  .fb-page { --fb-cvh: clamp(200px, 31svh, 270px); --fb-h1: clamp(1.75rem, 9.1vw, 2.35rem); --fb-pvh: clamp(170px, 44vw, 260px); }
  .fb-hero { grid-template-columns: 16px 1fr 1fr 16px; grid-template-rows: auto; padding-bottom: 40px; min-height: 0; }
  .fb-pairgl { grid-row: 1; grid-column: 1 / -1; width: 100%; }
  .fb-hero .fb-poster { inset: 0 0 12px; }
  .fb-hero > .fb-bench { grid-row: 2; grid-column: 1 / -1; margin: 0 16px; }
  .fb-h1 { grid-row: 3; grid-template-columns: 16px 1fr 16px 1fr 16px; margin: 14px 0 0; }
  .fb-h1-l { grid-column: 2; margin-right: 0; }
  .fb-h1-r { grid-column: 4; margin-left: 0; }
  .fb-punchset { grid-row: 4; grid-column: 2 / 4; margin-top: 26px; column-gap: 28px; }
  .fb-intro-l { grid-row: 5; grid-column: 2 / 4; justify-self: stretch; max-width: none; margin: 30px 0 0; background: var(--fb-beech); position: relative; z-index: 1; padding: 4px 0; }
  .fb-intro-r { grid-row: 6; grid-column: 2 / 4; justify-self: end; width: 88%; max-width: none; margin: 30px 0 0; background: var(--fb-beech); position: relative; z-index: 1; padding: 4px 0; }

  .fb-measure { grid-template-columns: 16px 1fr 1fr 16px; grid-template-rows: auto; }
  .fb-last { grid-row: 1; grid-column: 1 / -1; width: 100%; height: var(--fb-cvh); align-self: start; }
  .fb-last .fb-poster { inset: 0 0 16px; }
  .fb-measure.is-gl .fb-mark { display: none; }
  .fb-measure > .fb-bench { grid-row: 2; grid-column: 1 / -1; margin: 0 16px; }
  .fb-feet { grid-row: 1; grid-column: 1 / -1; justify-self: stretch; align-self: end; justify-content: space-between; margin: 0 16px 14px; pointer-events: none; }
  .fb-foot { pointer-events: auto; }
  .fb-tapes, .fb-measure.is-gl .fb-tapes, .fb-js .fb-tapes { grid-row: 3; grid-column: 2 / 4; display: block; margin-top: 26px; }
  .fb-measure .fb-hint { display: none; }
  .fb-notes { grid-row: 4; grid-column: 2 / 4; justify-self: stretch; max-width: none; margin: 14px 0 0; }
  .fb-soles { grid-row: 5; grid-column: 1 / -1; justify-self: center; width: min(300px, 80vw); margin-top: 22px; }
  .fb-ms-l { grid-row: 6; grid-column: 2 / 4; justify-self: stretch; max-width: none; margin: 26px 0 0; text-align: left; font-size: 1.0625rem; }
}
@media (max-width: 480px) and (max-height: 620px) {
  .fb-page { --fb-cvh: 200px; --fb-h1: 1.75rem; --fb-pvh: 170px; }
}

/* sections at the in-between widths */
@media (max-width: 1179px) and (min-width: 700px) {
  .fb-fitting { --fb-fdh: clamp(480px, 52vw, 580px); }
  .fb-steps { --fb-pw: 80px; --fb-ph: 216px; }
  .fb-sr .fb-step-photo { width: min(100%, 440px); }
  .fb-sl .fb-step-photo { width: min(100%, 320px); }
}

/* phones: the text sections move the seam to the left gutter */
@media (max-width: 699px) {
  .fb-sec > .fb-seam, .fb-pair-top > .fb-seam, .fb-pair-bot > .fb-seam, .fb-come-body > .fb-seam { left: 11px; }
  .fb-walk > .fb-seam { left: calc(50% - 1px); }
  .fb-walk .fb-head { background: var(--fb-beech); padding: 12px 0; }
  .fb-fit-stage::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; height: calc(var(--fb-fdh) + 32px); width: 2px; background: var(--fb-oxblood); }
  .fb-pairset { grid-template-columns: 28px 1fr 16px; }
  .fb-l, .fb-r { grid-column: 2; justify-self: stretch; width: auto; }
  .fb-r { margin-left: 14px; width: calc(100% - 14px); }
  .fb-echo { margin-top: 14px; }
  .fb-head .fb-l h2 { margin-bottom: 0; }

  .fb-band { padding: 32px 0 24px; }
  .fb-halves { --fb-cut: 8px; }
  .fb-split-band { --fb-sh: clamp(380px, 133vw, 560px); }
  .fb-caps { column-gap: 24px; padding: 0 16px; font-size: .9375rem; }
  .fb-page .fb-split-resole { width: auto; margin: 0 0 48px; --fb-sh: clamp(300px, 90vw, 440px); }
  .fb-split-resole .fb-caps { padding: 0 16px; }

  .fb-fit-stage { grid-template-columns: 1fr auto 28px auto 1fr; padding: 32px 0 0; }
  .fb-fitting { --fb-fdh: clamp(330px, 100vw, 420px); }
  .fb-fit-list { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 0 16px 0 28px; margin-top: 32px; row-gap: 6px; }
  .fb-fn-l, .fb-fn-r { justify-self: stretch; text-align: left; max-width: none; }
  .fb-fn-r { margin: 0 0 16px 14px; }
  .fb-js .fb-fn:not(.is-on) > p { display: none; }
  .fb-js .fb-fn.is-on .fb-fn-r { margin-bottom: 0; }
  .fb-fit-copy .fb-l { padding-top: 0; }
  .fb-fitting .fb-fit-copy { grid-template-columns: 28px 1fr 16px; }
  .fb-fit-photo { width: 100%; }

  .fb-steps { --fb-pw: 60px; --fb-ph: 162px; }
  .fb-step, .fb-step + .fb-step { grid-template-columns: 16px 1fr var(--fb-pw) 60px var(--fb-pw) 1fr 16px; margin-top: 28px; min-height: 0; row-gap: 12px; }
  .fb-step-ph, .fb-step-ph + .fb-step { margin-top: 28px !important; }
  .fb-sl .fb-print { grid-column: 3; }
  .fb-sr .fb-print { grid-column: 5; }
  .fb-sl .fb-step-t, .fb-sr .fb-step-t { grid-row: 2; grid-column: 2 / 7; justify-self: stretch; max-width: none; padding: 8px 0; background: var(--fb-beech); position: relative; }
  .fb-sl .fb-step-t { text-align: right; padding-right: calc(50% + 14px); }
  .fb-sr .fb-step-t { padding-left: calc(50% + 14px); }
  .fb-step h3 { font-size: 1.3rem; }
  .fb-step p { font-size: 1rem; line-height: 1.5; }
  .fb-sr .fb-step-photo, .fb-sl .fb-step-photo { grid-row: 3; grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .fb-step-photo img { width: 100%; }
  .fb-ph-stitching img { aspect-ratio: 4 / 5; object-fit: cover; }

  .fb-med { width: 100%; height: clamp(220px, 76vw, 320px); }
  .fb-med-ctl { grid-template-columns: 1fr; padding: 0 16px 0 28px; }
  .fb-med-ctl .fb-rng:first-child { justify-self: stretch; }
  .fb-med-ctl .fb-btn-o { justify-self: start; }
  .fb-rng { width: 100%; }
  .fb-leathers .fb-l .fb-lth-h, .fb-lth-l li { text-align: left; }
  .fb-lth-l .fb-rule { margin-left: 0; }
  .fb-lth b, .fb-lth i { font-size: 2rem; }
  .fb-pair-lines .fb-l { text-align: left; }
  .fb-end-pair { grid-template-columns: 16px 1fr 16px; row-gap: 8px; justify-items: center; text-align: center; }
  .fb-end-l, .fb-end-r { grid-column: 2; justify-self: center; margin: 0; }
  .fb-come-body > .fb-seam { bottom: 20px; }
  .fb-come-body > .fb-seam::after { content: ""; position: absolute; left: -9px; bottom: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--fb-lining); box-shadow: inset 0 2px 0 rgba(17, 17, 17, .25), 0 0 0 3px var(--fb-oxblood); }
  .fb-come-body { padding-bottom: 64px; }
  .fb-rosette { width: 64px; height: 64px; }
}
@media (max-width: 480px) and (max-height: 620px) {
  .fb-split-band { --fb-sh: 440px; }
  .fb-steps { --fb-pw: 48px; --fb-ph: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-page { transition: none; }
  .fb-h1-l, .fb-h1-r { animation: none; }
  .fb-page *, .fb-page *::before { transition: none !important; }
}