/* JORAVELI — the swatch book. Chalk white, charcoal, tape-measure yellow. */

@font-face { font-family: "Gloock"; src: url("../fonts/gloock.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Reddit Mono"; src: url("../fonts/reddit-mono.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
	--chalk: #F1EEE6;
	--chalk-2: #E7E2D5;
	--paper: #FBF9F4;
	--char: #1F2124;
	--char-2: #2C2F33;
	--char-3: #3B3F45;
	--mute: #555960;
	--mute-dark: #B9B6AE;
	--tape: #F4C430;
	--tape-2: #E2B11C;
	--thread: #AE3723;
	--line: rgba(31, 33, 36, .16);
	--line-dark: rgba(241, 238, 230, .16);
	--serif: "Gloock", "Times New Roman", serif;
	--sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Reddit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--spine: 0px;
	--gut: clamp(16px, 4vw, 56px);
	--max: 1440px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--zig: 7px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.rm { scroll-behavior: auto; }
body { margin: 0; background: var(--chalk); color: var(--char); font: 400 16px/1.6 var(--sans); padding-left: var(--spine); overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--thread); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--thread); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tape); color: var(--char); padding: 10px 14px; font-weight: 600; }
.skip:focus { left: calc(var(--spine) + 8px); }
.mono { font-family: var(--mono); }
.mute { color: var(--mute); }
.ico { width: 20px; height: 20px; flex: none; }

.h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 5.4rem); letter-spacing: -.01em; }
.h2 { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.005em; }
.h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.h1 em, .h2 em, .hero__title em { font-style: normal; color: var(--tape); }

.kicker { font: 600 .75rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 0; border-top: 2px dashed var(--thread); }
.kicker--tape::before { border: 0; height: 10px; width: 30px; background: repeating-linear-gradient(90deg, var(--char) 0 1px, transparent 1px 5px), var(--tape); }
.kicker--thread { color: var(--thread); }

/* ------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 2px solid var(--char); background: var(--char); color: var(--chalk); text-decoration: none; font: 600 .95rem/1 var(--sans); letter-spacing: .01em; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tape); }
.btn--tape { background: var(--tape); border-color: var(--tape); color: var(--char); }
.btn--tape:hover { box-shadow: 4px 4px 0 var(--chalk); }
.btn--line { background: transparent; color: inherit; border-color: currentColor; }
.btn--line:hover { box-shadow: 4px 4px 0 var(--tape); }
.btn--light { color: var(--chalk); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .85rem; }
.linkbtn { background: none; border: 0; padding: 0; display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* ------------------------------------------------ tape measure */
.tape { position: relative; height: 30px; background: var(--tape); color: var(--char); overflow: hidden; }
.tape::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%;
	background:
		repeating-linear-gradient(90deg, var(--char) 0 1.5px, transparent 1.5px 50px) 0 0 / 100% 46% no-repeat,
		repeating-linear-gradient(90deg, var(--char) 0 1px, transparent 1px 25px) 0 0 / 100% 32% no-repeat,
		repeating-linear-gradient(90deg, var(--char) 0 1px, transparent 1px 5px) 0 0 / 100% 18% no-repeat; }
.tape__nums { position: absolute; left: 0; bottom: 2px; display: flex; font: 600 9px/1 var(--mono); }
.tape__nums span { width: 50px; flex: none; padding-left: 3px; }
.tape--thin { height: 16px; }
.tape--thin .tape__nums { display: none; }

/* ------------------------------------------------ spine (fabric navigation) */
.spine { display: none; }
.chips-strip { background: var(--char); color: var(--chalk); border-top: 1px solid var(--line-dark); }
.chips-strip ul { list-style: none; margin: 0; padding: 10px var(--gut); display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.chips-strip ul::-webkit-scrollbar { display: none; }
.chips-strip a { display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; padding: 4px 12px 4px 4px; border: 1px solid var(--line-dark); font-size: .8rem; }
.chips-strip a[aria-current] { border-color: var(--tape); }
.chips-strip b { font: 700 .8rem var(--mono); color: var(--tape); }
.chips-strip .chip { width: 30px; height: 30px; }

.chip { position: relative; display: block; width: 44px; height: 44px; background: var(--c, #888); overflow: hidden; flex: none;
	-webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 6px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 6px 51% repeat-x;
	mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 6px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 6px 51% repeat-x; }
.chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.pinked {
	-webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zig) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) 51% repeat-x;
	mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zig) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) 51% repeat-x; }

@media (min-width: 1100px) {
	:root { --spine: 84px; }
	.chips-strip { display: none; }
	.spine { display: flex; flex-direction: column; align-items: center; position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--spine); background: var(--char); color: var(--chalk); padding: 14px 0 18px; border-right: 4px solid var(--tape); }
	.spine::after { content: ""; position: absolute; top: 0; bottom: 0; right: 10px; border-right: 2px dashed rgba(194, 65, 45, .55); pointer-events: none; }
	.spine__mark img { width: 46px; height: 46px; }
	.spine__label { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .68rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--mute-dark); margin: 22px 0 18px; }
	.spine__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
	.spine__chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; padding: 4px; }
	.spine__chip .chip { width: 46px; height: 46px; transition: transform .25s var(--ease); }
	.spine__chip:hover .chip, .spine__chip.is-current .chip { transform: translateX(6px) rotate(-4deg); }
	.spine__chip.is-current::before { content: ""; position: absolute; left: -4px; top: 14px; width: 5px; height: 26px; background: var(--tape); }
	.spine__num { font: 700 .72rem/1 var(--mono); color: var(--tape); }
	.spine__name { position: absolute; left: calc(100% + 14px); top: 10px; white-space: nowrap; background: var(--tape); color: var(--char); font: 600 .78rem/1 var(--mono); padding: 9px 12px; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: .2s var(--ease); }
	.spine__chip:hover .spine__name, .spine__chip:focus-visible .spine__name { opacity: 1; transform: none; }
	.spine__foot { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 .68rem/1 var(--mono); letter-spacing: .2em; color: var(--tape); }
}

/* ------------------------------------------------ top strip + masthead */
.topstrip { position: relative; background: var(--char); color: var(--chalk); }
.topstrip .tape--top { height: 8px; }
.topstrip .tape--top .tape__nums { display: none; }
.topstrip__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px var(--gut); min-height: 40px; font-size: .8rem; }
.topstrip__note { margin: 0; font: 500 .74rem/1.3 var(--mono); letter-spacing: .04em; color: var(--mute-dark); }

.region { position: relative; }
.region__btn { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line-dark); font-size: .8rem; white-space: nowrap; }
.region__btn::-webkit-details-marker { display: none; }
.region__btn .ico { width: 16px; height: 16px; color: var(--tape); }
.region__lab { color: var(--mute-dark); }
.region__cur { font: 700 .75rem var(--mono); background: var(--tape); color: var(--char); padding: 2px 6px; }
.region[open] .region__btn { border-color: var(--tape); }
.region__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(380px, 92vw); max-height: 70vh; overflow: auto; background: var(--paper); color: var(--char); padding: 18px 18px 8px; box-shadow: 8px 8px 0 var(--tape), 0 20px 40px rgba(0, 0, 0, .25); }
.region__intro { font-size: .85rem; color: var(--mute); }
.region__group { font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 6px; color: var(--thread); }
.region__panel ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 12px; }
.region__panel li { break-inside: avoid; }
.region__panel a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; text-decoration: none; font-size: .88rem; border-bottom: 1px dashed var(--line); }
.region__panel a:hover, .region__panel a[aria-current] { background: var(--tape); }
.region__panel .mono { font-size: .72rem; font-weight: 700; }

.masthead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); height: 70px; background: rgba(241, 238, 230, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.masthead__logo { display: block; color: var(--char); width: 170px; flex: none; }
.masthead__logo svg { width: 100%; height: auto; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.mainnav a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; }
.mainnav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; border-top: 2px dashed var(--thread); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.mainnav a:hover::after, .mainnav a[aria-current]::after { transform: none; }
.mainnav a[aria-current] { font-weight: 700; }
.mainnav__extra { display: none; }
.masthead__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; justify-content: center; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0 8px; }
.bag { background: var(--char); color: var(--chalk); padding: 0 14px; }
.bag__label { font-weight: 600; font-size: .9rem; }
.bag__count { font: 700 .75rem/1 var(--mono); background: var(--tape); color: var(--char); min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px; }
.tool--menu { display: none; }
.tool--menu .ico--close { display: none; }

@media (max-width: 1240px) {
	.mainnav a { padding: 10px 8px; font-size: .9rem; }
	.masthead__logo { width: 140px; }
}
@media (max-width: 1023px) {
	.topstrip__note { display: none; }
	.topstrip__inner { justify-content: flex-end; }
	.masthead { height: 62px; gap: 12px; }
	.masthead__logo { width: 132px; }
	.tool--menu { display: inline-flex; }
	.bag__label { display: none; }
	.mainnav { display: none; position: fixed; z-index: 50; inset: 0 0 0 auto; width: min(420px, 100vw); background: var(--char); color: var(--chalk); padding: 90px 28px 40px; overflow-y: auto; }
	.mainnav.is-open { display: block; box-shadow: -20px 0 60px rgba(0, 0, 0, .35); animation: navin .35s var(--ease); }
	.mainnav ul { flex-direction: column; gap: 0; }
	.mainnav a { font-family: var(--serif); font-size: 2rem; padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
	.mainnav a::after { display: none; }
	.mainnav a[aria-current] { color: var(--tape); font-weight: 400; }
	.mainnav__extra { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
	.mainnav__extra a { font: 500 .9rem var(--mono); border: 0; padding: 4px 0; }
	.masthead.menu-open .tool--menu { position: fixed; z-index: 60; right: var(--gut); top: 9px; color: var(--chalk); }
	.masthead.menu-open .tool--menu .ico--menu { display: none; }
	.masthead.menu-open .tool--menu .ico--close { display: block; }
	body.no-scroll { overflow: hidden; }
}
@media (max-width: 420px) {
	.region__lab { display: none; }
	.masthead__logo { width: 116px; }
}

/* ------------------------------------------------ hero: the open swatch book */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--char); color: var(--chalk); padding: clamp(28px, 5vw, 64px) var(--gut) clamp(36px, 5vw, 60px);
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "head head head head head head head head head head head head" "book book book book book book book cut cut cut cut cut" "foot foot foot foot foot foot foot foot foot foot foot foot"; column-gap: clamp(16px, 2.4vw, 40px); row-gap: 26px; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__no { position: absolute; right: -2vw; top: -6vw; font: 400 clamp(14rem, 34vw, 34rem)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(241, 238, 230, .1); letter-spacing: -.04em; }
.tape--hero { position: absolute; left: -12%; width: 140%; top: 62%; height: 44px; transform: rotate(-9deg); opacity: .96; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tape--hero::before { background:
	repeating-linear-gradient(90deg, var(--char) 0 2px, transparent 2px 60px) 0 0 / 100% 50% no-repeat,
	repeating-linear-gradient(90deg, var(--char) 0 1px, transparent 1px 30px) 0 0 / 100% 34% no-repeat,
	repeating-linear-gradient(90deg, var(--char) 0 1px, transparent 1px 6px) 0 0 / 100% 20% no-repeat; }
.tape--hero .tape__nums { font-size: 12px; bottom: 4px; }
.tape--hero .tape__nums span { width: 60px; }
.hero__head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 40px; align-items: end; }
.hero__head .kicker { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 1023px) { .hero__head { grid-template-columns: 1fr; } }
.hero__title { font-family: var(--serif); font-size: clamp(3rem, 7.6vw, 8rem); line-height: .92; letter-spacing: -.02em; margin: 0 0 18px; }
.hero__lede { max-width: 560px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--mute-dark); margin: 0; }
.hero .kicker { color: var(--tape); }

.book { grid-area: book; position: relative; perspective: 2200px; align-self: start; }
.book__spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1.42 / 1; background: #121315; padding: 10px; box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04); transform: rotate(-1.5deg); }
.book__spread::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 10px; bottom: 10px; width: 40px; margin-left: -20px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .35) 55%, transparent); pointer-events: none; }
.book__page { position: relative; overflow: hidden; }
.book__page--left { background: var(--paper); color: var(--char); }
.book__page--left::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(31, 33, 36, .05) 27px 28px); pointer-events: none; }
.spec { position: absolute; inset: 0; padding: clamp(14px, 2.2vw, 30px); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s; }
.spec.is-on { opacity: 1; visibility: visible; }
.spec__lab { font: 700 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin: 0; color: var(--thread); }
.spec__num { font: 400 clamp(4.4rem, 10vw, 9.6rem)/.86 var(--serif); margin: 6px 0 4px; letter-spacing: -.04em; }
.spec__name { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1 var(--serif); margin: 0 0 12px; }
.spec__facts { margin: 0 0 12px; display: grid; gap: 6px; font-size: .82rem; }
.spec__facts div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.spec__facts dt { font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.spec__facts dd { margin: 0; line-height: 1.35; }
.spec__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; text-decoration: none; align-self: flex-start; background: var(--tape); padding: 8px 12px; }
.spec__go .ico { width: 18px; height: 18px; }
.book__page--right { background: #0d0e10; }
.sw { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.sw.is-on { opacity: 1; visibility: visible; }
.sw img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.book__stitch { position: absolute; z-index: 2; inset: 12px; border: 2px dashed rgba(244, 196, 48, .55); pointer-events: none; }
.book__leaf { position: absolute; z-index: 4; top: 10px; bottom: 10px; left: 50%; width: calc(50% - 10px); transform-origin: left center; transform-style: preserve-3d; visibility: hidden; }
.book__leaf.is-turning { visibility: visible; transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.leaf__front, .leaf__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.leaf__back { transform: rotateY(180deg); background: var(--paper); color: var(--char); }
.leaf__front img, .leaf__back img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.leaf__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 30%); }
.leaf__back .spec { opacity: 1; visibility: visible; }

.book__tabs { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 0 10px; transform: rotate(-1.5deg); transform-origin: left top; }
.book__tab { position: relative; border: 0; cursor: pointer; width: clamp(44px, 5vw, 64px); height: 46px; padding: 14px 0 0; background: var(--c); color: var(--chalk); font: 700 .82rem/1 var(--mono); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); transition: height .25s var(--ease), background .2s; }
.book__tab span { display: inline-block; background: rgba(31, 33, 36, .7); padding: 3px 5px; }
.book__tab[aria-selected="true"] { height: 58px; background: var(--tape); color: var(--char); }
.book__tab[aria-selected="true"] span { background: transparent; }
.book__tab:hover { height: 54px; }
.book__play { margin-left: auto; border: 1px solid var(--line-dark); background: transparent; color: var(--chalk); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.book__play .ico--play { display: none; }
.book__play.is-paused .ico--pause { display: none; }
.book__play.is-paused .ico--play { display: block; }

.cut { grid-area: cut; position: relative; align-self: start; }
.cut__lab { position: relative; z-index: 1; width: fit-content; font: 700 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tape); background: var(--char); padding: 6px 12px 6px 0; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.cut__arrow { width: 36px; height: 14px; border-bottom: 2px solid var(--chalk); border-left: 2px solid var(--chalk); border-radius: 0 0 0 14px; position: relative; }
.cut__set { list-style: none; margin: 0; padding: 0; display: none; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); }
.cut__set.is-on { display: grid; }
.cut__piece a { display: block; text-decoration: none; position: relative; }
.cut__img { display: block; background: var(--paper); padding: 6px 6px 0; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); }
.cut__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cut__piece a::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgba(244, 196, 48, .85); transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.cut__tag { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 8px 10px 9px; background: var(--paper); color: var(--char); font-size: .8rem; }
.cut__tag b { font: 700 .68rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cut__tag span { font: 600 .82rem var(--mono); white-space: nowrap; }
.cut__piece--0 { transform: rotate(-2.2deg) translateY(4px); }
.cut__piece--1 { transform: rotate(1.6deg) translateY(28px); }
.cut__piece--2 { transform: rotate(1.2deg) translateY(-6px); }
.cut__piece--3 { transform: rotate(-1.8deg) translateY(18px); }
.cut__piece { transition: transform .35s var(--ease); }
.cut__piece:hover { transform: rotate(0) translateY(-6px) scale(1.02); z-index: 2; }
.cut__set.is-on .cut__piece { animation: pin .55s var(--ease) both; }
.cut__set.is-on .cut__piece--1 { animation-delay: .07s; }
.cut__set.is-on .cut__piece--2 { animation-delay: .14s; }
.cut__set.is-on .cut__piece--3 { animation-delay: .21s; }
@keyframes navin { from { transform: translateX(100%); } }
@keyframes pin { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.hero__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; }
.hero__facts { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 .82rem var(--mono); color: var(--mute-dark); }
.hero__facts b { color: var(--chalk); font-size: 1.05rem; margin-right: 4px; }

@media (max-width: 1023px) {
	.hero { grid-template-areas: "head head head head head head head head head head head head" "book book book book book book book book book book book book" "cut cut cut cut cut cut cut cut cut cut cut cut" "foot foot foot foot foot foot foot foot foot foot foot foot"; }
	.tape--hero { top: 46%; }
	.cut__set { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; padding: 14px 4px 36px; scroll-snap-type: x mandatory; }
	.cut__piece { scroll-snap-align: start; }
	.hero__facts { margin-left: 0; }
}
@media (max-width: 640px) {
	.book__spread { aspect-ratio: auto; grid-template-columns: 1fr 1fr; min-height: 300px; transform: none; }
	.book__tabs { transform: none; }
	.spec { padding: 12px; }
	.spec__facts div { grid-template-columns: 1fr; gap: 0; }
	.spec__facts div:nth-child(n + 2) { display: none; }
	.spec__go { font-size: .78rem; padding: 7px 9px; }
	.cut__set { grid-template-columns: repeat(4, 62%); }
	.hero__title { font-size: clamp(2.9rem, 14vw, 4rem); }
}

/* ------------------------------------------------ sections */
.sechead { padding: 0 var(--gut); max-width: var(--max); margin: 0 auto clamp(24px, 3vw, 40px); }
.sechead--split { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 20px 40px; align-items: end; }
.sechead--split > p { margin: 0; color: var(--mute); }
@media (max-width: 800px) { .sechead--split { grid-template-columns: 1fr; } }

.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px; padding: clamp(60px, 9vw, 130px) var(--gut); max-width: var(--max); margin: 0 auto; align-items: center; }
.how__img { grid-column: 1 / span 7; position: relative; }
.how__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 14px 14px 0 var(--tape); }
.chalk { position: absolute; fill: none; stroke: var(--chalk); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); }
.chalk--how { width: 46%; right: -8%; bottom: -12%; }
.chalk path { stroke-dasharray: 600; stroke-dashoffset: 0; }
.how__text { grid-column: 9 / span 4; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 16px 0; border-top: 2px dashed var(--line); }
.steps__n { font: 700 1.5rem/1 var(--mono); color: var(--thread); }
.steps h3 { font: 700 1.05rem/1.2 var(--sans); margin: 2px 0 6px; }
.steps p { margin: 0; color: var(--mute); font-size: .95rem; }
@media (max-width: 960px) {
	.how__img, .how__text { grid-column: 1 / -1; }
	.chalk--how { display: none; }
}

.bolts { padding: clamp(40px, 6vw, 90px) 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bolts__row { display: flex; gap: 10px; padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; height: clamp(420px, 46vw, 600px); }
.bolt { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; text-decoration: none; color: var(--chalk); background: var(--c); transition: flex-grow .6s var(--ease); }
.bolt__cloth, .bolt__cloth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bolt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(17, 18, 20, .86)); }
.bolt__tag { position: absolute; z-index: 2; top: 14px; left: 14px; }
.no { display: inline-flex; align-items: baseline; gap: 2px; background: var(--char); color: var(--tape); font: 700 1.05rem/1 var(--mono); padding: 8px 10px 8px 22px; position: relative; }
.no::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--chalk); box-shadow: inset 0 0 0 2px var(--char-3); }
.no small { font-size: .7em; color: var(--chalk); }
.bolt__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px; display: grid; gap: 6px; }
.bolt__name { font: 400 clamp(1.4rem, 2.3vw, 2.2rem)/1 var(--serif); }
.bolt__note, .bolt__comp { font-size: .9rem; color: rgba(241, 238, 230, .82); max-width: 360px; display: none; }
.bolt__comp { font: 500 .76rem var(--mono); }
.bolt__go { font: 700 .8rem var(--mono); color: var(--tape); display: inline-flex; align-items: center; gap: 6px; }
.bolt__go .ico { width: 16px; height: 16px; }
@media (min-width: 900px) {
	.bolt:hover, .bolt:focus-visible { flex-grow: 2.6; }
	.bolt:hover .bolt__note, .bolt:hover .bolt__comp, .bolt:focus-visible .bolt__note, .bolt:focus-visible .bolt__comp { display: block; }
}
@media (max-width: 899px) {
	.bolts__row { flex-direction: column; height: auto; }
	.bolt { height: 170px; flex: none; }
	.bolt__note { display: block; font-size: .85rem; }
}

.mix { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding: clamp(60px, 9vw, 130px) var(--gut); max-width: var(--max); margin: 0 auto; }
.mix__head { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
.mix__head > p { color: var(--mute); }
.look { margin: 0; position: relative; }
.look img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.look figcaption { position: relative; margin: -34px 12px 0; background: var(--paper); padding: 12px 14px; display: grid; gap: 4px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); border-top: 4px solid var(--tape); }
.look figcaption a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; font-size: .9rem; }
.look figcaption .mono { font-size: .76rem; font-weight: 700; color: var(--thread); }
.look__price { margin-left: auto; font: 600 .82rem var(--mono); }
.look--0 { grid-column: 5 / span 4; }
.look--1 { grid-column: 9 / span 4; margin-top: 120px; }
.look--2 { grid-column: 2 / span 4; grid-row: 2; margin-top: -120px; }
.mix__note { grid-column: 7 / span 5; grid-row: 2; align-self: center; font: 500 .78rem var(--mono); color: var(--mute); margin: 0; padding: 14px 16px; border: 2px dashed var(--line); }
@media (max-width: 960px) {
	.mix__head { grid-column: 1 / -1; position: static; }
	.look--0, .look--1, .look--2 { grid-column: span 6; margin-top: 0; }
	.look--2 { grid-column: 4 / span 6; grid-row: auto; margin-top: 0; }
	.mix__note { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
	.look--0, .look--1, .look--2 { grid-column: 1 / -1; }
}

.move { background: var(--char); color: var(--chalk); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); padding: clamp(60px, 8vw, 120px) var(--gut); position: relative; overflow: hidden; }
.move__film { grid-column: 2 / span 4; grid-row: 1 / span 2; }
.move__film .film { aspect-ratio: 9 / 16; max-height: 82vh; }
.move__text { grid-column: 7 / span 5; align-self: center; }
.move__text .kicker { color: var(--tape); }
.facts { list-style: none; margin: 24px 0 30px; padding: 0; }
.facts li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-top: 1px dashed var(--line-dark); color: var(--mute-dark); }
.facts__n { font: 700 1.3rem/1.1 var(--mono); color: var(--tape); }
.move__chalk { grid-column: 7 / span 6; }
.move__chalk .film { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
	.move__film { grid-column: 1 / span 6; grid-row: auto; }
	.move__text { grid-column: 1 / -1; }
	.move__chalk { grid-column: 7 / span 6; grid-row: 1; align-self: end; }
	.facts li { grid-template-columns: 100px 1fr; }
}

.film { position: relative; margin: 0; background: #0d0e10; overflow: hidden; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film__toggle { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(31, 33, 36, .7); color: var(--chalk); border: 1px solid rgba(241, 238, 230, .3); cursor: pointer; }
.film__toggle .ico--play { display: none; }
.film.is-paused .film__toggle .ico--pause { display: none; }
.film.is-paused .film__toggle .ico--play { display: block; }

.under { padding: clamp(60px, 8vw, 120px) 0; }
.under__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; align-items: start; }
.under__hero { grid-column: 1 / span 5; margin: 0; position: sticky; top: 90px; }
.under__hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.under__list { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 800px) {
	.under__hero, .under__list { grid-column: 1 / -1; position: static; }
	.under__hero img { aspect-ratio: 16 / 10; }
}

.service { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 var(--gut) clamp(60px, 8vw, 110px); border: 2px solid var(--char); max-width: var(--max); }
@media (min-width: 1540px) { .service { margin-left: auto; margin-right: auto; } }
.service__item { padding: 24px 26px; border-right: 2px dashed var(--line); font-size: .95rem; }
.service__item:last-child { border-right: 0; }
.service__k { font: 700 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--thread); }
.service__item a { font-weight: 600; }
.service__cur { display: flex; flex-wrap: wrap; gap: 6px; }
.service__cur span { font: 700 .76rem/1 var(--mono); background: var(--tape); padding: 5px 7px; }
@media (max-width: 800px) {
	.service { grid-template-columns: 1fr; }
	.service__item { border-right: 0; border-bottom: 2px dashed var(--line); }
}

/* ------------------------------------------------ cards */
.card { position: relative; }
.card__link { display: block; text-decoration: none; }
.card__img { position: relative; display: block; background: var(--chalk-2); overflow: hidden; }
.card__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease), opacity .35s; }
.card__alt { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) {
	.card__link:hover .card__alt { opacity: 1; }
	.card__link:hover .card__img img { transform: scale(1.03); }
}
.card__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 2px 0; align-items: baseline; }
.card__no, .card__kind { grid-row: 1; grid-column: 1; }
.card__no { font: 700 .72rem/1.4 var(--mono); color: var(--thread); }
.card__kind { font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.card__no + .card__kind { margin-left: 52px; }
.card__name { grid-row: 2; grid-column: 1; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.card__price { grid-row: 2; grid-column: 2; font: 600 .9rem var(--mono); white-space: nowrap; }
.card--small .card__name { font-size: .9rem; }
.price del { opacity: .6; }
.price ins { text-decoration: none; }
.woocommerce-Price-currencySymbol { margin-right: 1px; }

/* ------------------------------------------------ shop */
.shop__head, .phead { padding: 0 var(--gut) clamp(28px, 4vw, 48px); max-width: var(--max); margin: 0 auto; }
.shop__head .tape--thin, .phead .tape--thin { margin: 0 calc(var(--gut) * -1) clamp(22px, 3vw, 40px); }
.crumbs { font: 500 .78rem var(--mono); color: var(--mute); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { text-decoration: none; }
.crumbs .sep { opacity: .5; }
.shop__title, .phead__title { font: 400 clamp(2.8rem, 7vw, 6.4rem)/.95 var(--serif); letter-spacing: -.02em; margin: 0 0 16px; }
.shop__intro, .phead__intro { max-width: 640px; font-size: 1.08rem; color: var(--mute); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.filters a { text-decoration: none; padding: 9px 14px; border: 1.5px solid var(--char); font-weight: 600; font-size: .88rem; }
.filters a:hover { background: var(--tape); border-color: var(--tape); }
.filters a[aria-current] { background: var(--char); color: var(--chalk); }

.rows { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.frow { display: grid; grid-template-columns: minmax(180px, 1fr) 4fr; gap: clamp(14px, 2vw, 28px); padding: clamp(26px, 3.4vw, 44px) 0; border-top: 2px dashed var(--line); }
.frow:first-child { border-top: 0; }
.frow__swatch { display: flex; flex-direction: column; gap: 12px; text-decoration: none; position: sticky; top: 90px; align-self: start; }
.frow__cloth { display: block; background: var(--c); }
.frow__cloth img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.frow__label { display: grid; gap: 6px; }
.frow__name { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1 var(--serif); }
.frow__comp { font: 500 .74rem/1.4 var(--mono); color: var(--mute); }
.frow__go { font-weight: 700; font-size: .85rem; display: inline-flex; gap: 6px; align-items: center; }
.frow__go .ico { width: 16px; height: 16px; }
.frow .no { justify-self: start; }
.frow__pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.frow__pieces--1, .frow__pieces--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frow__more { grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; background: var(--paper); border-left: 4px solid var(--tape); font-size: .9rem; }
.frow__more .mono { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--thread); margin-right: 6px; }
.frow__more a { text-decoration: none; border-bottom: 1px dashed var(--char); font-weight: 600; }
.frow__more a span { font: 500 .8rem var(--mono); color: var(--mute); }
@media (max-width: 900px) {
	.frow { grid-template-columns: 1fr; }
	.frow__swatch { position: static; flex-direction: row; align-items: center; }
	.frow__cloth { width: 96px; flex: none; }
	.frow__pieces { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.frow__pieces .card { scroll-snap-align: start; }
	.frow__pieces--1, .frow__pieces--2 { grid-template-columns: repeat(2, 1fr); overflow: visible; }
	.frow__more { grid-column: 1; }
}

.underrow { background: var(--char); color: var(--chalk); padding: clamp(50px, 7vw, 100px) var(--gut); margin-top: clamp(30px, 5vw, 60px); }
.underrow__head { max-width: var(--max); margin: 0 auto 30px; }
.underrow__head > p { color: var(--mute-dark); max-width: 520px; }
.underrow .kicker { color: var(--tape); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); max-width: var(--max); margin: 0 auto; }
.grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 var(--gut); }
.underrow .card__meta, .underrow .card__kind { color: var(--chalk); }
.underrow .card__kind { color: var(--mute-dark); }
@media (max-width: 1023px) { .grid, .grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid, .grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ fabric page */
.fab__hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: min(80vh, 760px); background: var(--char); color: var(--chalk); }
.fab__cloth { position: relative; overflow: hidden; }
.fab__cloth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fab__card { padding: clamp(28px, 4vw, 64px) var(--gut); display: flex; flex-direction: column; justify-content: center; position: relative; }
.fab__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(180deg, var(--tape) 0 2px, transparent 2px 10px); opacity: .6; }
.fab__card .crumbs { color: var(--mute-dark); }
.fab__num { font: 400 clamp(7rem, 16vw, 15rem)/.8 var(--serif); margin: 6px 0 4px; letter-spacing: -.05em; color: var(--tape); }
.fab__name { font: 400 clamp(2rem, 4vw, 3.6rem)/1 var(--serif); margin: 0 0 14px; }
.fab__note { max-width: 520px; color: var(--mute-dark); font-size: 1.05rem; }
.spec__facts--dark div { border-top-color: var(--line-dark); }
.spec__facts--dark dt { color: var(--mute-dark); }
.spec__facts--dark { font-size: .92rem; max-width: 560px; margin-top: 10px; }
.spec__facts--dark div { grid-template-columns: 80px 1fr; }
.fab__pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.fab__pager a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 .82rem var(--mono); padding: 10px 12px; border: 1px solid var(--line-dark); }
.fab__pager a:hover { border-color: var(--tape); color: var(--tape); }
.fab__pieces { padding: clamp(50px, 7vw, 100px) 0 clamp(30px, 4vw, 60px); }
.grid--fab { padding: 0 var(--gut); }
@media (max-width: 900px) {
	.fab__hero { grid-template-columns: 1fr; }
	.fab__cloth { height: 300px; }
}

.suits { padding: clamp(40px, 6vw, 90px) 0; background: var(--paper); border-top: 1px solid var(--line); }
.suits__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; padding: 0 var(--gut); max-width: var(--max); margin: 0 auto; }
.suits__note { padding: 0 var(--gut); max-width: var(--max); margin: 22px auto 0; font: 500 .8rem var(--mono); color: var(--mute); }
.slip { background: #fff; padding: 22px 22px 26px; font: 500 .88rem/1.5 var(--mono); position: relative; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .4); --zig: 10px; }
.slip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #fff 0) 0 0 / 12px 10px, linear-gradient(45deg, transparent 6px, #fff 0) 0 0 / 12px 10px; }
.slip__h { font: 700 .76rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--thread); padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.slip ul { list-style: none; margin: 0; padding: 6px 0; }
.slip li, .slip__total { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; }
.slip li a { text-decoration: none; }
.dots { flex: 1; border-bottom: 2px dotted rgba(31, 33, 36, .3); transform: translateY(-4px); min-width: 20px; }
.slip__total { border-top: 2px solid var(--char); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1rem; }
.slip__note { margin: 10px 0 0; font-size: .74rem; color: var(--mute); }

/* ------------------------------------------------ product page */
.pdp__top { max-width: var(--max); margin: 0 auto; padding: 22px var(--gut) 0; }
.pdp__main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.pdp__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pdp__shot { grid-column: span 2; }
.pdp__track--even .pdp__shot { grid-column: span 3; }
.pdp__shot { margin: 0; background: var(--chalk-2); }
.pdp__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pdp__track .pdp__shot--lead { grid-column: 1 / -1; }
.pdp__shot--lead img { transition: opacity .25s; }
.pdp__shot--lead.is-swapping img { opacity: .4; }
.pdp__dots { display: none; }
.pdp__photonote { font: 500 .76rem var(--mono); color: var(--mute); margin-top: 10px; }
.pdp__panel { position: sticky; top: 90px; padding-bottom: 30px; }
.pdp__fab { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: .9rem; margin-bottom: 14px; }
.pdp__fab b { font-family: var(--mono); color: var(--thread); }
.pdp__fab .chip { width: 34px; height: 34px; }
.pdp__fab--plain { font: 500 .85rem var(--mono); }
.pdp__title { font: 400 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--serif); margin: 0 0 12px; letter-spacing: -.01em; }
.pdp__price { font: 600 1.3rem var(--mono); margin: 0 0 12px; }
.cur { font: 700 .72rem var(--mono); background: var(--char); color: var(--chalk); padding: 3px 6px; vertical-align: middle; letter-spacing: .06em; }
.cur-code { font: 700 .72rem var(--mono); }
.pdp__short { color: var(--mute); }
.swap { margin: 18px 0; padding: 14px 0; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
.swap__h { display: flex; justify-content: space-between; gap: 10px; font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.swap__now { color: var(--thread); letter-spacing: .04em; text-transform: none; }
.swap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.swap__chip { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font: 700 .74rem var(--mono); padding: 4px; border: 2px solid transparent; }
.swap__chip .chip { width: 48px; height: 48px; }
.swap__chip[aria-current] { border-color: var(--char); background: var(--tape); }
.swap__chip:hover .chip { transform: rotate(-4deg); }
.pdp__help { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .88rem; margin: 6px 0 14px; }
.pdp__inseam { font: 500 .78rem var(--mono); color: var(--mute); }
.pdp__assure { list-style: none; margin: 0 0 18px; padding: 14px 16px; background: var(--paper); border-left: 4px solid var(--tape); font-size: .88rem; display: grid; gap: 8px; }
.pdp__assure b { font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }

/* variation form */
.pdp__buy form.cart { margin: 6px 0 4px; }
.pdp__buy table.variations { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.pdp__buy table.variations tr { display: block; margin-bottom: 14px; }
.pdp__buy table.variations th, .pdp__buy table.variations td { display: block; padding: 0; text-align: left; }
.pdp__buy table.variations th label { font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.pdp__buy select { width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--char); background: var(--paper); font: 500 1rem var(--sans); border-radius: 0; }
.js .pdp__buy .has-opts select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { min-width: 52px; height: 44px; padding: 0 10px; border: 1.5px solid var(--char); background: var(--paper); font: 600 .85rem var(--mono); cursor: pointer; transition: background .15s, color .15s; }
.opt:hover { background: var(--tape); }
.opt[aria-pressed="true"] { background: var(--char); color: var(--chalk); }
.opt:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.opt--swatch { display: inline-flex; align-items: center; gap: 8px; }
.opt--swatch i { width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, .3); background: var(--sw); }
.reset_variations { font: 500 .78rem var(--mono); margin-left: 6px; }
.single_variation_wrap .woocommerce-variation-price { display: none; }
.woocommerce-variation-availability p { font: 500 .8rem var(--mono); color: var(--mute); }
.woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.quantity { display: flex; }
.quantity .qty { width: 64px; min-height: 52px; border: 1.5px solid var(--char); background: var(--paper); text-align: center; font: 600 1rem var(--mono); border-radius: 0; }
.single_add_to_cart_button { flex: 1; min-height: 56px; border: 2px solid var(--char); background: var(--char); color: var(--chalk); font: 700 1rem var(--sans); cursor: pointer; position: relative; transition: transform .2s var(--ease), box-shadow .2s; }
.single_add_to_cart_button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tape); }
.single_add_to_cart_button.disabled { opacity: 1; background: #55575a; border-color: #55575a; color: var(--chalk); cursor: not-allowed; }
.single_add_to_cart_button.disabled:hover { transform: none; box-shadow: none; }
.wc-no-matching-variations { font-size: .85rem; }

.acc details { border-top: 2px dashed var(--line); }
.acc details:last-child { border-bottom: 2px dashed var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 1.4rem/1 var(--mono); color: var(--thread); }
.acc details[open] summary::after { content: "–"; }
.acc__body { padding: 0 0 18px; font-size: .94rem; }
.facts-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.facts-table th { text-align: left; font: 700 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); width: 34%; padding: 9px 10px 9px 0; vertical-align: top; }
.facts-table td { padding: 9px 0; }
.facts-table tr + tr { border-top: 1px solid var(--line); }

.measure { margin: 16px 0 0; background: var(--char); color: var(--chalk); padding: 16px; }
.measure svg { width: 100%; max-width: 320px; margin: 0 auto; }
.measure__g { fill: none; stroke: rgba(241, 238, 230, .45); stroke-width: 2; stroke-linejoin: round; }
.measure__l { stroke: var(--tape); stroke-width: 3; stroke-dasharray: 8 6; fill: none; }
.measure__l--2 { stroke: var(--chalk); }
.measure__t { fill: var(--tape); font: 700 12px var(--mono); text-anchor: middle; }
.measure__t--start { text-anchor: start; }
.measure figcaption { font: 500 .76rem/1.5 var(--mono); color: var(--mute-dark); margin-top: 10px; text-align: center; }

.suit { max-width: var(--max); margin: clamp(50px, 7vw, 100px) auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.suit__slip .h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-family: var(--serif); margin: 4px 0 14px; }
.suit__cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.suit--with { display: block; }
.suit--with .sechead { padding: 0; }
.suit--with .grid--five { padding: 0; }
.rule { max-width: var(--max); margin: clamp(50px, 7vw, 100px) auto; padding: clamp(30px, 4vw, 60px) var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; background: var(--char); color: var(--chalk); align-items: center; }
.rule__img { grid-column: 1 / span 5; margin: 0; }
.rule__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rule__text { grid-column: 7 / span 5; }
.rule__text > p { color: var(--mute-dark); }
.rule .card { max-width: 260px; margin-top: 20px; }
.rule .card__kind { color: var(--mute-dark); }
.rule .card__no { color: var(--tape); }
@media (max-width: 1023px) {
	.pdp__main { grid-template-columns: 1fr; }
	.pdp__panel { position: static; }
	.pdp__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
	.pdp__track::-webkit-scrollbar { display: none; }
	.pdp__shot { flex: 0 0 86%; scroll-snap-align: center; }
	.pdp__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
	.pdp__dots span { width: 22px; height: 4px; background: var(--line); }
	.pdp__dots span.is-on { background: var(--char); }
	.suit { grid-template-columns: 1fr; }
	.rule__img { grid-column: 1 / -1; }
	.rule__text { grid-column: 1 / -1; }
	.rule { margin-left: var(--gut); margin-right: var(--gut); }
}

/* drawer */
.drawer { border: 0; padding: 0; margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(560px, 100vw); background: var(--paper); color: var(--char); }
.drawer::backdrop { background: rgba(17, 18, 20, .6); }
.drawer[open] { animation: slide .35s var(--ease); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer__in { padding: 22px 24px 40px; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: -22px; background: var(--paper); padding: 10px 0; z-index: 2; border-bottom: 2px dashed var(--line); margin-bottom: 14px; }
.drawer__head .h3 { margin: 0; }
.drawer__x { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1.5px solid var(--char); cursor: pointer; }

.sizes__h { font: 700 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 22px 0 8px; }
.sizes__note { font-size: .85rem; color: var(--mute); }
.table-wrap { overflow-x: auto; }
.sizetable { width: 100%; border-collapse: collapse; font: 500 .84rem var(--mono); min-width: 420px; }
.sizetable th, .sizetable td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sizetable thead th { background: var(--char); color: var(--chalk); font-size: .72rem; letter-spacing: .1em; }
.sizetable .is-you { background: var(--tape); color: var(--char); }
.sizetable thead .is-you { background: var(--tape); color: var(--char); }
.sizetable .mute { font-size: .72rem; }

/* ------------------------------------------------ pages */
article.page { padding-bottom: clamp(50px, 7vw, 100px); }
.phead { padding-top: 0; }
.page__body { max-width: 820px; margin: 0 auto; padding: 0 var(--gut); }
.page--wc .page__body { max-width: var(--max); }
.page__updated { font-size: .78rem; color: var(--mute); }
.prose h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--serif); margin: 2em 0 .6em; }
.prose h3 { font: 700 1.05rem/1.3 var(--sans); margin: 1.6em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { background: var(--char); color: var(--chalk); font: 700 .74rem var(--mono); letter-spacing: .08em; }
.prose tbody th { font: 700 .76rem var(--mono); width: 30%; }
.prose .box { background: var(--paper); border: 2px dashed var(--char); padding: 20px 22px; font-family: var(--mono); font-size: .88rem; }
.prose details { border-top: 2px dashed var(--line); }
.prose details summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary::after { content: "+"; font: 400 1.3rem/1 var(--mono); color: var(--thread); }
.prose details[open] summary::after { content: "–"; }
.prose details p { color: var(--mute); }

.about__hero { position: relative; background: var(--char); color: var(--chalk); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(30px, 5vw, 70px) var(--gut); align-items: end; }
.about__film { grid-column: 1 / span 8; grid-row: 1; }
.about__film .film { aspect-ratio: 16 / 9; }
.about__title { grid-column: 7 / span 6; grid-row: 1; align-self: end; position: relative; z-index: 2; background: var(--char); padding: 28px 0 6px 32px; margin-bottom: -40px; }
.about__title .kicker { color: var(--tape); }
.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding: clamp(40px, 6vw, 90px) var(--gut); max-width: var(--max); margin: 0 auto; }
.about__text { grid-column: 1 / span 6; font-size: 1.08rem; }
.about__text > p:first-child { font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.3 var(--serif); }
.about__img { margin: 0; }
.about__img img { width: 100%; object-fit: cover; }
.about__img figcaption { font: 500 .76rem var(--mono); color: var(--mute); margin-top: 8px; }
.about__img--a { grid-column: 7 / span 6; grid-row: 1; align-self: start; }
.about__img--a img { aspect-ratio: 16 / 9; box-shadow: 12px 12px 0 var(--tape); }
.about__img--b { grid-column: 8 / span 3; grid-row: 2; }
.about__img--c { grid-column: 11 / span 2; grid-row: 2; margin-top: 80px; }
.about__img--b img, .about__img--c img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
	.about__film, .about__title, .about__text, .about__img--a { grid-column: 1 / -1; grid-row: auto; }
	.about__title { padding: 0; margin: 0; }
	.about__img--b { grid-column: 1 / span 7; grid-row: auto; }
	.about__img--c { grid-column: 8 / span 5; grid-row: auto; margin-top: 40px; }
}

.contact__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(24px, 4vw, 60px); max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); align-items: start; }
.ticket { background: var(--char); color: var(--chalk); padding: 26px 24px 24px; position: relative; }
.ticket::before { content: ""; position: absolute; top: 16px; right: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--chalk); }
.ticket__h { font: 700 .76rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tape); }
.ticket dl { margin: 0; }
.ticket dl div { padding: 12px 0; border-top: 1px dashed var(--line-dark); }
.ticket dt { font: 700 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-dark); }
.ticket dd { margin: 4px 0 0; }
.ticket .mute { color: var(--mute-dark); font-size: .82rem; }
.ticket__wd { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; padding: 12px 14px; background: var(--tape); color: var(--char); font-weight: 700; text-decoration: none; }
.ticket__img { margin: 0; }
.ticket__img img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

.fit__intro { max-width: 820px; margin: 0 auto; padding: 0 var(--gut); font-size: 1.08rem; }
.fit__tables { max-width: 980px; margin: 20px auto 0; padding: 0 var(--gut); }
.fit__how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); max-width: var(--max); margin: clamp(50px, 7vw, 100px) auto 0; padding: 0 var(--gut); align-items: start; }
.fit__photo { grid-column: 1 / span 5; margin: 0; position: sticky; top: 90px; }
.fit__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fit__steps { grid-column: 7 / span 6; }
.fit__steps .measure { margin-top: 20px; }
@media (max-width: 900px) {
	.fit__photo, .fit__steps { grid-column: 1 / -1; position: static; }
}

.nf { min-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding: 40px var(--gut); max-width: var(--max); margin: 0 auto; }
.nf__num { font: 400 clamp(8rem, 22vw, 20rem)/.8 var(--serif); color: transparent; -webkit-text-stroke: 2px var(--char); margin: 0; }
@media (max-width: 760px) { .nf { grid-template-columns: 1fr; } }

/* forms */
.form { display: grid; gap: 14px; max-width: 640px; }
.field { margin: 0; display: grid; gap: 6px; }
.field label { font: 700 .72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.field .opt { font: 500 .72rem var(--mono); text-transform: none; letter-spacing: 0; color: var(--mute); border: 0; background: none; height: auto; min-width: 0; padding: 0; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--char); background: var(--paper); font: 400 1rem var(--sans); border-radius: 0; }
.field textarea { min-height: 140px; }
.form__note { font-size: .82rem; color: var(--mute); }
.form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn--ghost { background: transparent; color: var(--char); }
.hp { position: absolute; left: -9999px; }
.notice { padding: 16px 18px; border-left: 5px solid var(--char); background: var(--paper); margin-bottom: 18px; }
.notice--ok { border-color: #2E7D4F; }
.notice--err { border-color: var(--thread); }
.notice h2 { font: 400 1.6rem var(--serif); margin: 0 0 8px; }
.steps[aria-label="Progress"] { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0 0 6px; }
.steps[aria-label="Progress"] li { border: 0; padding: 0; display: flex; gap: 6px; grid-template-columns: none; font: 600 .82rem var(--mono); color: var(--mute); }
.steps[aria-label="Progress"] li.is-current { color: var(--char); }
.steps[aria-label="Progress"] li span { color: var(--thread); }
.summary dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; }
.summary dt { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.summary dd { margin: 0; }

/* WooCommerce bag, checkout, account (on top of WooCommerce's own CSS) */
.page--wc .woocommerce { font-size: .98rem; }
.page--wc .button, .page--wc button.button, .page--wc input.button, .woocommerce a.button, .woocommerce button.button { background: var(--char) !important; color: var(--chalk) !important; border-radius: 0 !important; padding: 14px 22px !important; font: 700 .95rem var(--sans) !important; }
.woocommerce #place_order, .woocommerce .checkout-button { background: var(--tape) !important; color: var(--char) !important; font-size: 1.05rem !important; padding: 18px 26px !important; border: 2px solid var(--char) !important; }
.page--wc table.shop_table { border-radius: 0; border: 2px solid var(--char); background: var(--paper); }
.page--wc table.shop_table th { font: 700 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.page--wc .cart_item img { width: 72px !important; }
.page--wc .woocommerce-message, .page--wc .woocommerce-info, .page--wc .woocommerce-error { border-top-color: var(--tape); background: var(--paper); }
.page--wc .woocommerce-message::before, .page--wc .woocommerce-info::before { color: var(--char); }
.page--wc .input-text, .page--wc select, .page--wc .select2-selection { border: 1.5px solid var(--char) !important; border-radius: 0 !important; min-height: 46px; padding: 8px 12px !important; background: var(--paper) !important; }
.page--wc .select2-selection { height: 46px !important; }
.page--wc .select2-selection__arrow { height: 44px !important; }
.page--wc .form-row label { font: 700 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.page--wc #order_review, .page--wc .cart_totals { background: var(--paper); padding: 20px; border: 2px solid var(--char); }
.page--wc .cart-collaterals .cart_totals h2, .page--wc #order_review_heading, .page--wc .woocommerce-billing-fields h3, .page--wc .woocommerce-additional-fields h3, .page--wc #ship-to-different-address { font: 400 1.8rem var(--serif); }
.checkout-note { font-size: .86rem; background: var(--chalk); padding: 12px 14px; border-left: 4px solid var(--tape); margin: 14px 0; }
.checkout-note p { margin: 0 0 6px; }
.cart-no { font: 700 .74rem var(--mono); color: var(--thread); margin-right: 4px; }
.woocommerce-cart-form .product-name a { font-weight: 600; text-decoration: none; }
.wc-empty-cart-message { font-family: var(--serif); font-size: 1.6rem; }
.page--wc .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.page--wc .woocommerce-MyAccount-navigation a { display: block; padding: 10px 0; border-bottom: 1px dashed var(--line); text-decoration: none; font-weight: 600; }
.page--wc .woocommerce-privacy-policy-text, .page--wc .woocommerce-terms-and-conditions-wrapper { font-size: .86rem; }
.page--wc .return-to-shop .button { background: var(--tape) !important; color: var(--char) !important; }

/* cookie notice */
.cookie-note { position: fixed; z-index: 70; left: calc(var(--spine) + 16px); bottom: 16px; max-width: 420px; background: var(--char); color: var(--chalk); padding: 16px 18px; display: flex; gap: 14px; align-items: center; font-size: .84rem; box-shadow: 6px 6px 0 var(--tape); }
.cookie-note p { margin: 0; }
.cookie-note a { color: var(--tape); }
.cookie-note .btn { background: var(--tape); color: var(--char); border-color: var(--tape); flex: none; }
@media (max-width: 520px) { .cookie-note { left: 10px; right: 10px; bottom: 10px; } }

/* ------------------------------------------------ receipt footer */
.receipt-wrap { background: var(--char); padding: clamp(50px, 7vw, 100px) var(--gut) clamp(40px, 5vw, 70px); position: relative; overflow: hidden; }
.receipt-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--tape); }
.receipt { position: relative; max-width: 980px; margin: 0 auto; background: #FFFEFA; color: var(--char); padding: 36px clamp(20px, 4vw, 56px) 40px; font: 500 .9rem/1.6 var(--mono); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); transform: rotate(-.6deg); }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: linear-gradient(-45deg, transparent 7px, #FFFEFA 0) 0 0 / 14px 12px, linear-gradient(45deg, transparent 7px, #FFFEFA 0) 0 0 / 14px 12px; }
.receipt::before { top: -11px; transform: rotate(180deg); }
.receipt::after { bottom: -11px; }
.receipt__head { text-align: center; }
.receipt__mark { margin: 0 auto 10px; }
.receipt__brand { font: 400 2.4rem/1 var(--serif); letter-spacing: .14em; margin: 0; }
.receipt__sub { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.receipt__addr, .receipt__contact { font-size: .82rem; margin: 6px 0; }
.receipt__contact a { text-decoration: none; border-bottom: 1px dashed var(--char); }
.receipt__rule { border-top: 2px dashed var(--char); margin: 22px 0; }
.receipt__rule--double { border-top: 4px double var(--char); }
.receipt__fabrics { width: 100%; border-collapse: collapse; font-size: .9rem; }
.receipt__fabrics th { text-align: left; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-bottom: 6px; }
.receipt__fabrics th:last-child, .receipt__fabrics td:last-child { text-align: right; }
.receipt__fabrics td { padding: 3px 0; }
.receipt__fabrics td:first-child { width: 60px; font-weight: 700; color: var(--thread); }
.receipt__fabrics .lead { display: flex; align-items: baseline; gap: 6px; }
.receipt__fabrics a { text-decoration: none; }
.receipt__fabrics a:hover { background: var(--tape); }
.receipt__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 30px; }
.receipt__h { font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; color: var(--thread); }
.receipt__cols ul { list-style: none; margin: 0; padding: 0; }
.receipt__cols li { padding: 2px 0; }
.receipt__cols a { text-decoration: none; }
.receipt__cols a:hover { background: var(--tape); }
.receipt__totals { margin: 0; display: grid; gap: 4px; }
.receipt__totals div { display: flex; justify-content: space-between; gap: 16px; }
.receipt__totals dt { text-transform: uppercase; font-size: .76rem; letter-spacing: .1em; }
.receipt__totals dd { margin: 0; font-weight: 700; text-align: right; }
.receipt__thanks { text-align: center; margin: 26px 0 10px; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; }
.receipt__code { display: flex; justify-content: center; gap: 3px; height: 46px; margin: 0 auto 14px; max-width: 320px; }
.receipt__code span { flex: 1; background: repeating-linear-gradient(90deg, var(--char) 0 2px, transparent 2px 4px, var(--char) 4px 5px, transparent 5px 8px); border-bottom: 6px solid var(--c); }
.receipt__small { text-align: center; font-size: .7rem; color: var(--mute); margin: 0; }
@media (max-width: 720px) {
	.receipt { transform: none; }
	.receipt__cols { grid-template-columns: 1fr 1fr; }
	.receipt__cols nav:last-child { grid-column: 1 / -1; }
	.receipt__brand { font-size: 1.9rem; }
}

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.cut__piece, .cut__piece:hover { transform: none; }
}
.page--wc .form-row label.checkbox, .page--wc .woocommerce-form__label-for-checkbox, .page--wc .woocommerce-terms-and-conditions-wrapper label { font: 400 .92rem/1.5 var(--sans); text-transform: none; letter-spacing: 0; }
.page--wc .woocommerce-form__label-for-checkbox span { font-weight: 500; }
.book__tablist { display: flex; align-items: flex-start; gap: 6px; }
.book__play { background: var(--char); position: relative; z-index: 2; }