:root{
--paper:     #FDE5D8;
--paper-cool:#FFFFFF;
--band:      #F3D4C9;
--peach-deep:#EBC7B6;
--scarlet:   #D22B3A;
--garnet:    #8E1F30;
--blush:     #FFF1E8;
--bronze:    #8A5A3C;
--ink:       #3E2A20;
--ink-dim:   #6F5344;
--shade:     110, 70, 45;
--lay:       0 1px 2px rgba(var(--shade), .05);
--lift:      0 2px 8px -3px rgba(var(--shade), .08),
0 12px 34px -14px rgba(var(--shade), .13);
--hair:      0.5px;
--line:      rgba(90, 55, 35, .22);
--line-2:    rgba(90, 55, 35, .11);
--r:         10px;
--display:   'Prata', Georgia, 'Times New Roman', serif;
--body:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono:      var(--body);
--s1: .5rem;    --s2: .75rem;  --s3: 1rem;    --s4: 1.5rem;
--s5: 2.25rem;  --s6: 3.5rem;  --s7: 5rem;    --s8: 7.5rem;
--wrap:      1200px;
--gut:       clamp(1.25rem, 2vw + 1rem, 6rem);
--fg:        var(--ink);
--fg-dim:    var(--ink-dim);
--accent:    var(--garnet);
--card:      #FFFFFF;
}
.sec--band{ background: var(--band); }
*, *::before, *::after{ box-sizing: border-box; }
html{
scroll-behavior: smooth;
scroll-padding-top: var(--s6);
overscroll-behavior-y: contain;
hanging-punctuation: first last;
}
body{
margin: 0;
color: var(--ink);
font-family: var(--body);
font-size: 17px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
font-variant-numeric: tabular-nums;
overflow-x: clip;
}
img{ display: block; max-width: 100%; height: auto; }
[hidden]{ display: none !important; }
::selection{ background: rgba(210, 43, 58, .2); color: var(--ink); }
h1, h2, h3{
font-family: var(--display); font-weight: 400; margin: 0;
text-wrap: balance;
font-variant-numeric: oldstyle-nums;
}
h1{ font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -.014em; }
h2{ font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.006em; }
.sec--minor h2{ font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
h3{ font-size: 1.12rem; line-height: 1.32; letter-spacing: 0; }
p{
margin: 0 0 var(--s3); max-width: 62ch;
text-wrap: pretty;
}
p:last-child{ margin-bottom: 0; }
a{ color: inherit; }
:lang(uk) p, :lang(cs) p, :lang(uk) .law, :lang(cs) .law{ hyphens: auto; }
:lang(en) p{ hyphens: manual; }
em, i{ font-style: normal; }
.caption, .sign__name, .quotes cite{ font-style: italic; }
:lang(uk) q{ quotes: '«' '»' '„' '“'; }
:lang(cs) q{ quotes: '„' '“' '‚' '‘'; }
:lang(en) q{ quotes: '“' '”' '‘' '’'; }
.brow{
display: flex; align-items: center; gap: var(--s2);
font-size: .68rem; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); margin: 0 0 var(--s3);
}
.brow::before{
content: ''; flex: 0 0 auto; width: var(--mark, 26px); height: 7px;
background: var(--scarlet);
clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
}
.sec--major{ --mark: 44px; }
.sec--minor{ --mark: 16px; }
.lead{ color: var(--fg-dim); font-size: 1.08rem; }
.lead::first-line{ font-variant-caps: all-small-caps; letter-spacing: .06em; }
.note{ color: var(--fg-dim); font-size: .88rem; }
.mono{
font-family: var(--mono); font-size: .66rem;
letter-spacing: .13em; font-variant-numeric: tabular-nums;
}
.middle{ text-align: center; }
.middle p{ margin-inline: auto; }
.law a, .about__body a, .asks a{
text-decoration: underline;
text-decoration-color: var(--scarlet);
text-underline-offset: .22em;
text-decoration-thickness: 1px;
}
.about__body > p:first-of-type::first-letter{
float: left; font-family: var(--display); font-size: 3.6em;
line-height: .82; padding: .06em .12em 0 0; color: var(--garnet);
}
:focus-visible{
outline: 2px solid var(--garnet); outline-offset: 3px; border-radius: 4px;
}
.skip{
position: absolute; top: 0; z-index: 400;
background: var(--scarlet); color: #fff; padding: var(--s2) var(--s3);
text-decoration: none;
}
.skip:focus{ left: 0; }
.edge{
position: fixed; left: 0; top: 0; bottom: 0; z-index: 90;
pointer-events: none;
}
.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow{ max-width: 720px; }
.wrap--mid{ max-width: 900px; }
.bar{
position: fixed; inset: 0 0 auto 0; z-index: 100;
}
.bar__in{ display: flex; align-items: center; gap: var(--s3); min-height: 3.9rem; }
.bar__end{ margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.brand{ display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.langs{ display: flex; gap: .1rem; }
.langs button{
font: inherit; font-size: .66rem; font-weight: 400; letter-spacing: .12em;
text-transform: uppercase; border: 0; background: transparent; color: var(--fg-dim);
padding: .4rem .5rem .3rem; cursor: pointer; position: relative;
transition: color .2s;
}
.langs button::after{
content: ''; position: absolute; left: .3rem; right: .3rem; bottom: 0; height: 3px;
background: var(--scarlet); opacity: 0; transition: opacity .2s;
clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
}
.langs button[aria-pressed="true"]{ color: var(--garnet); font-weight: 600; }
.langs button[aria-pressed="true"]::after{ opacity: 1; }
.burger{
width: 40px; height: 40px; cursor: pointer; padding: 0;
border: var(--hair) solid var(--line); border-radius: var(--r);
background: transparent; color: var(--ink);
}
.burger span{ display: block; width: 16px; height: 1.5px; margin: 4px auto; background: currentColor; }
.drawer{ display: none; border-top: var(--hair) solid var(--line-2); background: var(--paper); }
.drawer.is-open{ display: block; padding: var(--s1) var(--gut) var(--s4); }
.drawer a{
display: block; padding: var(--s2) 0; text-decoration: none;
border-bottom: var(--hair) solid var(--line-2); font-size: .98rem;
}
.btn{
display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
font: inherit; font-size: .93rem; font-weight: 600; text-decoration: none;
cursor: pointer; padding: .8rem 1.7rem; border-radius: 999px;
border: var(--hair) solid transparent;
transition: background .2s, border-color .2s, color .2s, transform .1s ease-out;
}
.btn--go{
background: var(--scarlet); color: #fff; border-radius: var(--r);
padding-inline-end: 2.1rem;
clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
}
.btn--go:hover{ background: #BE2432; }
.btn--quiet{ border-color: var(--line); color: var(--fg); }
.btn--quiet:hover{ border-color: var(--scarlet); color: var(--garnet); }
.btn--wide{ width: 100%; }
.btn:active{ transform: scale(.97); }
.linkish{
border: 0; background: none; padding: 0; font: inherit; font-size: .88rem;
color: var(--fg-dim); cursor: pointer; text-decoration: underline;
text-decoration-color: var(--line); text-underline-offset: .2em;
}
.linkish:hover{ color: var(--garnet); text-decoration-color: var(--scarlet); }
.sec{ padding: var(--s7) 0; position: relative; }
.sec--major{ padding: var(--s8) 0; }
.sec--minor{ padding: var(--s6) 0; }
.sec--hero{ padding: calc(var(--s8) + 2rem) 0 var(--s7); }
.sec--last{ padding-bottom: var(--s8); }
.head{
display: grid; gap: var(--s3) var(--s5);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: end; margin-bottom: var(--s6);
}
.head > .brow{ grid-column: 1 / -1; margin-bottom: 0; }
.head--plain{ display: block; }
.rule{ display: flex; align-items: center; justify-content: center; gap: 6px; }
.rule::before, .rule::after{
content: ''; width: min(70px, 16vw); height: 3px;
}
.rule::before{ clip-path: polygon(0 50%, 8px 0, 100% 0, 100% 100%, 8px 100%); }
.rule::after{ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.rule__knot{ width: 9px; height: 9px; border-radius: 50%; }
.hero{
display: grid; gap: var(--s5);
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: end;
}
.hero__h{ margin-bottom: var(--s4); }
.hero__h em{ font-style: normal; color: var(--garnet); }
.hero__do{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.hero__pair{ position: relative; margin: 0; }
.hero__pair img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.hero__main{ box-shadow: var(--lift); }
.hero__aside{
position: absolute; right: -6%; bottom: -12%; width: 42%;
box-shadow: var(--lift); border: 4px solid #FFFFFF; border-radius: var(--r);
}
.hero__pair .caption{ margin-top: var(--s4); }
.fold{ position: relative; }
.fold::after{
content: ''; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
background: linear-gradient(225deg, var(--scarlet) 0 50%, transparent 50%);
border-top-right-radius: var(--r); pointer-events: none;
}
.caption{ margin-top: var(--s2); font-size: .78rem; color: var(--fg-dim); text-align: center; }
.grid{
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (min-width: 1000px){ .grid{ grid-template-columns: repeat(5, 1fr); } }
.swatch{ text-align: center; position: relative; }
.swatch__shot{
display: block; width: 100%; padding: 0;
background: transparent; overflow: hidden;
aspect-ratio: 4 / 5; position: relative;
box-shadow: var(--lay);
transition: transform .18s ease-out, box-shadow .18s ease-out;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='13' fill='none' stroke='%23D22B3A' stroke-width='1.4'/%3E%3Cpath d='M17 11v12M11 17h12' stroke='%23D22B3A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 17 17, zoom-in;
}
.swatch__shot:hover{ box-shadow: var(--lift); }
.swatch__shot img{
width: 100%; height: 100%; object-fit: cover;
object-position: var(--focus, 50% 50%);
}
.swatch__see{
position: absolute; inset: auto 0 0 0;
background: linear-gradient(180deg, rgba(43, 15, 22, 0), rgba(43, 15, 22, .8));
color: #fff; font-size: .66rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
padding: 2rem .5rem .7rem; opacity: 0;
}
.swatch__label{ align-items: baseline; justify-content: center; gap: .5rem;
margin-top: var(--s2);
}
.swatch__name{ font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.swatch__no{ color: var(--fg-dim); }
.swatch__native{ display: block; font-size: .72rem; color: var(--fg-dim); }
.swatch__native:empty{ display: none; }
.swatch__duo{
width: .62em; height: .62em; border-radius: 50%; display: inline-block;
vertical-align: -.04em;
background: linear-gradient(135deg, var(--tint, var(--scarlet)) 0 50%, #fff 50% 100%);
box-shadow: inset 0 0 0 1px rgba(42, 20, 24, .25);
}
.plus{
margin-top: var(--s1); display: inline-flex; align-items: center; gap: .4rem;
border: var(--hair) solid var(--line); border-radius: 999px;
background: transparent; color: var(--fg); cursor: pointer;
font: inherit; font-size: .78rem; padding: .24rem .46rem;
opacity: 0; transition: opacity .18s, border-color .2s, transform .1s ease-out;
}
.swatch:hover .plus, .plus:focus-visible, .swatch.is-picked .plus{ opacity: 1; }
@media (hover: none){ .plus{ opacity: 1; } }
.plus:hover{ border-color: var(--scarlet); }
.plus:active{ transform: scale(.94); }
.plus__sign{
width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
background: var(--scarlet); color: #fff; font-size: .9rem; line-height: 1;
}
.plus__count{ font-variant-numeric: tabular-nums; font-size: .74rem; }
.plus__count:empty{ display: none; }
.swatch.is-picked .swatch__shot{ box-shadow: var(--lay), 0 0 0 2px var(--scarlet); }
.swatch__shot--soon{
cursor: default; display: grid; align-content: end;
background:
repeating-linear-gradient(104deg,
rgba(255,255,255,.18) 0 2px, rgba(255,255,255,0) 2px 7px,
rgba(0,0,0,.05) 7px 9px, rgba(255,255,255,0) 9px 16px),
linear-gradient(104deg,
rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 28%,
rgba(0,0,0,.07) 54%, rgba(255,255,255,.4) 76%, rgba(255,255,255,0) 100%),
var(--tint, #E8DFE2);
box-shadow: inset 0 0 0 var(--hair) rgba(42, 20, 24, .14);
}
.swatch__shot--soon:hover{ transform: none; box-shadow: inset 0 0 0 var(--hair) rgba(42, 20, 24, .14); }
.swatch__soon{
background: #FFFFFF; color: var(--ink);
font-size: .6rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
padding: .45rem .4rem;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
}
.hint{ color: var(--fg-dim); font-size: .82rem; text-align: center; margin-top: var(--s4); }
.tally{ display: block; font-size: .68rem; font-variant-numeric: tabular-nums; }
.cards, .steps, .pair, .shots, .quotes{ list-style: none; margin: 0; padding: 0; }
.cards{ display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.cards--four{ grid-template-columns: repeat(4, 1fr); }
.shots, .quotes{ display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.pair{ display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; margin-top: var(--s5); }
.card{
background: var(--card); border: var(--hair) solid var(--line-2);
border-radius: var(--r); padding: var(--s4); box-shadow: var(--lay);
}
.card h3{ margin-bottom: var(--s1); }
.card p{ color: var(--fg-dim); font-size: .93rem; }
.card__meta{ color: var(--accent); font-size: .68rem; letter-spacing: .13em;
text-transform: uppercase; margin-bottom: var(--s2); }
.card--wide{ margin-top: var(--s4); }
.steps{ display: grid; gap: var(--s5); grid-template-columns: repeat(4, 1fr); }
.steps--five{ grid-template-columns: repeat(5, 1fr); }
.steps li{ padding-top: var(--s2); }
.steps__n{
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; margin-bottom: var(--s2);
border: 1px solid var(--scarlet); color: var(--garnet);
font-size: .72rem; font-variant-numeric: tabular-nums;
clip-path: polygon(0 0, 100% 0, 100% 38%, 86% 50%, 100% 62%, 100% 100%, 0 100%);
}
.steps h3{ margin-bottom: var(--s1); }
.steps p{ color: var(--fg-dim); font-size: .92rem; }
.quotes li{ background: var(--card); border-radius: var(--r); padding: var(--s4);
border: var(--hair) solid var(--line-2); }
.ribboned{ list-style: none; padding: 0; margin: 0 0 var(--s3); }
.ribboned li{ position: relative; padding-inline-start: var(--s4); margin-bottom: var(--s1); }
.ribboned li::before{
content: ''; position: absolute; inset-inline-start: 0; top: .68em;
width: 14px; height: 4px; background: var(--scarlet);
clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%);
}
.asks details{ position: relative; }
.asks details::before{
content: ''; position: absolute; top: 1.35rem; width: 4px; height: 1.5rem;
background: var(--scarlet); opacity: 0; transition: opacity .18s;
}
.asks details[open]::before{ opacity: 1; }
.asks summary{
cursor: pointer; list-style: none; padding: var(--s4) 2.2rem var(--s4) 0;
font-family: var(--display); font-size: 1.16rem; position: relative;
}
.asks summary::-webkit-details-marker{ display: none; }
.asks summary::after{
content: '+'; position: absolute; right: .2rem; top: 50%;
transform: translateY(-50%); color: var(--scarlet);
}
.asks details[open] summary::after{ content: '–'; }
.asks p{ color: var(--fg-dim); font-size: .95rem; padding-bottom: var(--s4); margin: 0; }
.form__row{ display: grid; gap: 0 var(--s3); grid-template-columns: 1fr 1fr; }
.field{ display: block; margin-bottom: var(--s4); max-width: none; }
.field label{
display: block; font-size: .68rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--s1);
}
.field input[type="text"], .field select, .field textarea{
width: 100%; font: inherit; font-size: .97rem; color: inherit;
background: var(--card); padding: .78rem 1rem;
min-height: 48px;
transition: border-color .2s;
}
.field textarea{ resize: vertical; overflow: hidden; }
.field input:focus, .field select:focus, .field textarea:focus{
outline: none; border-color: var(--scarlet);
}
.field ::placeholder, .field input::placeholder, .field textarea::placeholder{
color: rgba(107, 86, 90, .5);
}
.field__hint{ display: block; font-size: .76rem; color: var(--fg-dim); margin-top: .35rem; }
.field.is-bad input, .field.is-bad textarea{ border-color: var(--scarlet); border-width: 1.5px; }
.field__err{ display: block; color: var(--ink); font-size: .8rem; margin-top: .35rem; }
.field__err::before{ content: '↑ '; color: var(--scarlet); }
.field__count{ float: right; font-size: .72rem; color: var(--fg-dim);
font-variant-numeric: tabular-nums; }
.tick{ display: flex; gap: var(--s2); align-items: flex-start; font-size: .92rem; }
.tick input{ margin-top: .4rem; accent-color: var(--scarlet); }
.tick__more summary{ cursor: pointer; font-size: .8rem; color: var(--accent); }
.tick__more .law{ margin-top: var(--s2); }
.form__send{ margin-top: var(--s4); }
.form__send .btn{ min-width: 62%; padding-block: 1.05rem; }
.form__done{
display: none; margin-top: var(--s4); padding: var(--s5) var(--s4);
border: var(--hair) solid var(--line); border-radius: var(--r);
background: var(--card); box-shadow: var(--lift); text-align: center;
}
.form.is-done .form__done{ display: block; }
.form.is-done .form__body{ display: none; }
.form__done .seal{ width: 68px; height: 68px; margin-bottom: var(--s3); }
.form__say{ text-align: center; min-height: 1.4rem; margin-top: var(--s3); font-size: .92rem; }
.or{ margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2);
justify-content: center; align-items: center; }
.or span{ color: var(--fg-dim); font-size: .88rem; margin-inline-end: .3rem; }
.mark{ width: 17px; height: 17px; flex: 0 0 auto; }
.foot{ padding: var(--s7) 0 var(--s4); }
.foot__in{ display: grid; gap: var(--s5); }
.foot__h{
font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent); margin: 0 0 var(--s3);
}
.foot a{ display: block; padding: .3rem 0; font-size: .92rem;
text-decoration: none; width: fit-content; }
.foot a:hover{ text-decoration: underline; text-decoration-color: var(--accent);
text-underline-offset: .24em; }
.foot__law{ margin-top: var(--s5); }
.foot__law summary{ cursor: pointer; font-size: .86rem; padding: var(--s1) 0; }
.law{ font-size: .87rem; color: var(--fg-dim); max-width: 62ch; padding-bottom: var(--s3); }
.law h3{ font-size: 1rem; margin: var(--s4) 0 var(--s1); color: var(--fg); }
.toc{ list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: .82rem; }
.toc li{ padding: .2rem 0; }
.foot__end{
margin-top: var(--s5); padding-top: var(--s4);
display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; font-size: .84rem;
}
.foot__end a{ display: inline; }
.seal{
width: 92px; height: 92px; margin: 0 auto var(--s5);
display: grid; place-items: center; position: relative;
background: radial-gradient(circle at 38% 32%, #E14150, #A81E2C 62%, #7E1A28);
color: #FFE9E6;
clip-path: polygon(50% 0%, 66% 5%, 78% 2%, 88% 14%, 97% 26%, 95% 42%, 100% 55%,
92% 68%, 88% 82%, 74% 88%, 62% 97%, 48% 94%, 34% 99%, 22% 89%,
10% 82%, 5% 68%, 0% 54%, 6% 40%, 3% 26%, 14% 14%, 22% 3%, 36% 6%);
}
.seal svg{ width: 34px; height: 34px; margin-bottom: .5rem; }
.seal__year{
position: absolute; bottom: 15%;
font-size: .54rem; font-weight: 600; letter-spacing: .16em;
font-variant-numeric: tabular-nums;
color: #fff; background: #5E1220;
padding: .06rem .34rem; border-radius: 2px;
}
.sign{ width: 190px; height: auto; margin-top: var(--s5); color: var(--garnet); }
.sign__name{ font-size: .8rem; color: var(--fg-dim); margin-top: .2rem; }
dialog{ border: 0; padding: 0; color: var(--fg); background: var(--paper); }
dialog::backdrop{ background: rgba(60, 22, 30, .55); }
.sheet{
margin: 0 0 0 auto; height: 100%; max-height: 100%;
width: min(460px, 100%);
border-radius: 0; border-left: var(--hair) solid var(--line);
display: grid; grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.sheet{ background: #FFFFFF; }
.sheet__head{
padding: var(--s4) var(--s4) var(--s3);
border-bottom: var(--hair) solid var(--line-2); background: #FFFFFF;
}
.sheet__body{ overflow-y: auto; padding: var(--s3) var(--s4); scrollbar-width: thin; }
.sheet__body::-webkit-scrollbar{ width: 6px; }
.sheet__body::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; }
.sheet__foot{
padding: var(--s3) var(--s4) var(--s4);
}
.sheet__x{ float: right; margin: -.4rem -.4rem 0 0; }
.x{ border: 0; background: transparent; color: var(--fg-dim); font-size: 1.6rem;
line-height: 1; cursor: pointer; padding: .2rem .5rem; }
.x:hover{ color: var(--fg); }
.sheet h2{ font-size: 1.6rem; margin-bottom: .3rem; }
.sheet__part{ margin-top: var(--s4); }
.sheet__part > .foot__h{ margin-bottom: var(--s2); }
.sheet__none{ color: var(--fg-dim); margin: var(--s4) 0; text-align: center; }
.sheet__none svg{ width: 62px; height: 62px; margin: 0 auto var(--s3); color: var(--line); }
.sheet__min{ color: var(--garnet); font-size: .84rem; margin-top: var(--s2); text-align: center; }
.sheet__do{ display: grid; gap: var(--s2); justify-items: center; }
.rows{ list-style: none; margin: 0; padding: 0; }
.rows li{
display: grid; align-items: center; gap: var(--s2);
grid-template-columns: 40px 1fr auto auto;
padding: var(--s2) var(--s1);
}
.rows img, .rows__chip{ width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.rows__chip{ display: block; box-shadow: inset 0 0 0 var(--hair) rgba(42, 20, 24, .16); }
.rows__id{ display: block; font-size: .6rem; color: var(--fg-dim); letter-spacing: .1em; }
.rows__name{ font-size: .9rem; }
.rows__set{ display: flex; align-items: center; gap: .25rem; }
.rows__n{ min-width: 2ch; text-align: center; font-size: .86rem; font-variant-numeric: tabular-nums; }
.rows__sum{ font-size: .82rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.step{
width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
border: var(--hair) solid var(--line); background: #FFFFFF; color: var(--fg);
font: inherit; font-size: .9rem; line-height: 1;
transition: border-color .2s, transform .1s ease-out;
}
.step:hover{ border-color: var(--scarlet); }
.step:active{ transform: scale(.9); }
.wraps{ display: grid; gap: var(--s2); grid-template-columns: repeat(4, 1fr); }
.wrapopt{
border: var(--hair) solid var(--line); border-radius: var(--r); cursor: pointer;
background: #FFFFFF; padding: 0 0 .4rem; font: inherit; font-size: .7rem;
color: var(--fg); overflow: hidden; transition: border-color .2s;
}
.wrapopt > span:first-child{
display: block; height: 34px; margin-bottom: .35rem;
background: var(--swatch, var(--band));
}
.wrapopt:hover{ border-color: var(--scarlet); }
.wrapopt[aria-pressed="true"]{ border-color: var(--scarlet); }
.pills{ display: flex; flex-wrap: wrap; gap: var(--s1); }
.pill{
font: inherit; font-size: .8rem; cursor: pointer;
border: var(--hair) solid var(--line); border-radius: 999px;
background: transparent; color: var(--fg); padding: .38rem .85rem;
transition: border-color .2s, background .2s, color .2s;
}
.pill:hover{ border-color: var(--scarlet); }
.pill[aria-pressed="true"]{ background: var(--scarlet); border-color: var(--scarlet); color: #fff; }
.sheet__name input{ text-align: center; font-style: italic; }
.bill{ margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .4rem var(--s3); }
.bill dt{ color: var(--fg-dim); font-size: .87rem; }
.bill dd{ margin: 0; font-size: .86rem; text-align: right; font-variant-numeric: tabular-nums; }
.bill .off{ color: var(--garnet); }
.bill__gap{
grid-column: 1 / -1; height: 3px; background: var(--scarlet); margin: var(--s2) 0;
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.bill dt.is-total{ font-family: var(--display); font-size: 1.2rem; color: var(--fg); align-self: center; }
.bill dd.is-total{
font-family: var(--display); font-size: 1.4rem; padding: .3rem 1.3rem .3rem .9rem;
clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
}
.cur{ font-size: .66em; }
.bill__about{ text-align: right; font-size: .7rem; color: var(--fg-dim); margin: .3rem 0 0; }
.bill__next{
margin-top: var(--s2); font-size: .8rem; border-radius: var(--r); padding: .5rem .8rem; text-align: center;
}
.look{
width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0;
padding: var(--s4);
--fg: #FBF6F4; --fg-dim: #C7A9AE;
}
.look__in{ display: grid; justify-items: center; gap: var(--s3); max-height: 100%; }
.look img{ max-height: 78vh; width: auto; border-radius: 0; }
.look__bar{ display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
justify-content: center; }
.look__name{ font-family: var(--display); font-size: 1.4rem; color: #FBF6F4; margin: 0; }
.look__no{ color: #C7A9AE; }
.look__nav{
position: fixed; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid rgba(251, 246, 244, .3);
color: #FBF6F4; font-size: 1.2rem; line-height: 1;
}
.look__nav:hover{ border-color: var(--scarlet); }
.look__nav:active{ transform: translateY(-50%) scale(.92); }
.look__prev{ left: var(--s3); }
.look__next{ right: var(--s3); }
.look .sheet__x{ position: fixed; top: var(--s3); right: var(--s4); float: none; }
.js .hero__pair img, .js .rows img{ opacity: 0; transition: opacity .3s ease-out; }
.js .hero__pair img.is-in, .js .rows img.is-in{ opacity: 1; }
@keyframes drawer-in{ from{ transform: translateX(22px); opacity: 0; } to{ transform: none; opacity: 1; } }
@keyframes veil-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes answer-in{ from{ opacity: 0; } to{ opacity: 1; } }
.sheet[open]{ animation: drawer-in .22s ease-out; }
.look[open]{ display: grid; place-items: center; animation: veil-in .18s ease-out; }
dialog[open]::backdrop{ animation: veil-in .22s ease-out; }
.asks details[open] > p{ animation: answer-in .22s ease-out; }
main{ transition: opacity .12s linear; }
.is-swapping main{ opacity: .35; }
[disabled], .is-off{ opacity: .42; pointer-events: none; }
@media (max-width: 1000px){
.cards, .cards--four, .shots, .quotes{ grid-template-columns: repeat(2, 1fr); }
.steps, .steps--five{ grid-template-columns: repeat(3, 1fr); }
.foot__in{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
.hero{ grid-template-columns: 1fr; align-items: start; }
.hero__aside{ position: static; width: 52%; margin: var(--s3) 0 0 auto; }
.head{ grid-template-columns: 1fr; align-items: start; }
.edge{ display: none; }
.sheet{ width: 100%; }
.form__row{ grid-template-columns: 1fr; }
.pair{ grid-template-columns: 1fr; }
.foot__end{ flex-direction: column; }
}
@media (max-width: 620px){
.cards, .cards--four, .shots, .quotes{ grid-template-columns: 1fr; }
.steps, .steps--five{ grid-template-columns: repeat(2, 1fr); }
.bar__end .btn--go{ display: none; }
.grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); }
.wraps{ grid-template-columns: repeat(2, 1fr); }
.form__send .btn{ min-width: 100%; }
}
@media print{
.bar, .drawer, .edge, .plus, .hint, .form, .or, dialog, .foot__law,
.hero__do, .btn, .skip{ display: none !important; }
body{ background: #fff; color: #000; font-size: 11pt; }
.sec{ padding: 1.2rem 0; break-inside: avoid; }
.grid{ grid-template-columns: repeat(4, 1fr); }
a[href^="http"]::after{ content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
.js .hero__pair img, .js .rows img{ opacity: 1 !important; }
*, *::before, *::after{ transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
.hero__facts{
display: flex; flex-wrap: wrap;
font-size: .72rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim); margin: 0 0 var(--s3);
}
.hero__price{ font-size: .92rem; color: var(--garnet); margin-top: var(--s2); }
.dots{ display: flex; gap: 6px; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.dots li{
width: 13px; height: 13px; border-radius: 50%; background: var(--tint, var(--band));
box-shadow: inset 0 0 0 1px rgba(42, 20, 24, .16);
}
.hero__h u{
text-decoration: none;
background-image: linear-gradient(var(--scarlet), var(--scarlet));
background-repeat: no-repeat; background-size: 100% 5px;
background-position: 0 88%; padding-bottom: .06em;
}
.hero__main{ border: 10px solid #FFFFFF; }
.hero__hand{
position: absolute; left: -8px; top: 14px; z-index: 2;
background: var(--scarlet); color: #fff;
font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
padding: .3rem .7rem .3rem .55rem;
clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}
.palette__price{ text-align: center; margin-bottom: var(--s4); }
.filters{ display: flex; gap: var(--s1); justify-content: center; margin-bottom: var(--s5); }
.group-head{
grid-column: 1 / -1; margin: var(--s4) 0 0;
font-size: .68rem; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent);
}
.swatch__soon small{
display: block; font-size: .86em; font-weight: 400; opacity: .75;
letter-spacing: .08em; text-transform: none;
}
.swatch__no{ cursor: copy; }
.swatch__no.is-copied{ color: var(--scarlet); }
.quick{
display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
margin-top: var(--s3); font-size: .8rem; color: var(--fg-dim);
}
.quick button{
font: inherit; font-size: .8rem; cursor: pointer; min-width: 38px;
border: var(--hair) solid var(--line); border-radius: var(--r);
background: transparent; color: var(--fg); padding: .3rem .6rem;
transition: border-color .2s, transform .1s ease-out;
}
.quick button:hover{ border-color: var(--scarlet); }
.quick button:active{ transform: scale(.94); }
.rows__more{ text-align: center; padding: var(--s2) 0; }
.sheet__sum{ float: right; font-size: .9rem; color: var(--garnet); margin-top: .35rem; }
.bill__each{ text-align: right; font-size: .72rem; color: var(--fg-dim); margin: .2rem 0 0; }
@keyframes total-note{ from{ opacity: .25; } to{ opacity: 1; } }
.bill dd.is-total.is-new{ animation: total-note .4s ease-out; }
@keyframes row-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.sheet[open] .rows li{ animation: row-in .24s ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }
.fly{
position: fixed; z-index: 500; pointer-events: none;
border-radius: 50%; overflow: hidden; box-shadow: var(--lift);
transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .42s ease-in;
}
.fly img{ width: 100%; height: 100%; object-fit: cover; }
.plus__sign.is-yes{ background: var(--garnet); }
.burger span{ transition: transform .2s ease-out; }
.burger[aria-expanded="true"] span:first-child{ transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-3px) rotate(-45deg); }
.skip{ left: 0; transform: translateY(-120%); transition: transform .2s ease-out; }
.skip:focus{ transform: none; }
.wrapopt{ position: relative; }
.wrapopt::after{
content: ''; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 0 2px var(--scarlet);
opacity: 0; transform: scale(.96);
transition: opacity .18s ease-out, transform .18s ease-out;
pointer-events: none;
}
.wrapopt[aria-pressed="true"]::after{ opacity: 1; transform: none; }
.wrapopt[aria-pressed="true"]{ box-shadow: none; }
.look img{ transition: opacity .18s ease-out; }
.look img.is-turning{ opacity: 0; }
.look__nav{ cursor: pointer; transition: border-color .2s, transform .18s ease-out; }
.vs{ width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: .92rem; }
.vs th, .vs td{
text-align: start; padding: var(--s2) var(--s3);
}
.vs thead th{
font-weight: 600; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim);
}
.vs tbody th{ font-weight: 400; color: var(--fg-dim); }
.vs td:first-of-type{ color: var(--garnet); font-weight: 600; }
.parts{ display: grid; gap: var(--s4); grid-template-columns: auto 1fr; align-items: center; }
.parts svg{ width: 150px; height: auto; color: var(--scarlet); }
.numbers{
display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr);
text-align: center; margin-top: var(--s5);
}
.numbers b{
display: block; font-family: var(--display); font-weight: 400;
font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
}
.numbers span{ font-size: .8rem; color: var(--fg-dim); }
.pull{
font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
line-height: 1.3; color: var(--fg); margin: var(--s5) 0 0;
padding-inline-start: var(--s4); border-inline-start: 3px solid var(--scarlet);
}
.card__mark{ width: 26px; height: 26px; color: var(--scarlet); margin-bottom: var(--s2); }
.asks__group{ margin-top: var(--s5); }
.asks__group:first-child{ margin-top: 0; }
.asks__more{ margin-top: var(--s4); font-size: .9rem; }
.form__errors{
background: var(--blush); color: var(--garnet); border-radius: var(--r);
padding: var(--s2) var(--s3); margin-bottom: var(--s4); font-size: .88rem;
}
.form__basket{
border: var(--hair) solid var(--line); border-radius: var(--r);
padding: var(--s3); margin-bottom: var(--s4); background: var(--card);
font-size: .9rem;
}
.form__basket h3{
font-size: .68rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--s1);
}
.form__basket .linkish{ float: right; font-size: .78rem; }
.form__next{ list-style: none; padding: 0; margin: var(--s4) 0 0; text-align: start; display: inline-block; }
.form__next li{
position: relative; padding-inline-start: var(--s4); margin-bottom: var(--s1);
font-size: .9rem; color: var(--fg-dim);
}
.form__next li::before{
content: ''; position: absolute; inset-inline-start: 0; top: .62em;
width: 13px; height: 4px; background: var(--scarlet);
clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 50%, 100% 100%, 0 100%);
}
.form__answer{ font-size: .8rem; color: var(--fg-dim); margin-top: var(--s2); }
.foot__in{ grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.foot__ribbon{ height: 3px; margin-bottom: var(--s6); }
.foot__place{ font-size: .78rem; }
.thumb{
display: none; position: fixed; inset: auto 0 0 0; z-index: 95;
padding: var(--s2) var(--gut) calc(var(--s2) + env(safe-area-inset-bottom));
background: rgba(253, 229, 216, .97);
border-top: var(--hair) solid var(--line);
}
.thumb .btn{ width: 100%; }
.shots--soon{ text-align: center; color: var(--fg-dim); padding: var(--s6) 0; }
.anchor{
opacity: 0; margin-inline-start: .4em; color: var(--scarlet);
text-decoration: none; font-size: .6em; vertical-align: .2em;
transition: opacity .18s;
}
h2:hover .anchor, .anchor:focus-visible{ opacity: 1; }
@media (max-width: 900px){
.parts{ grid-template-columns: 1fr; }
.foot__in{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
.numbers{ grid-template-columns: 1fr; gap: var(--s3); }
.foot__in{ grid-template-columns: 1fr; }
.thumb{ display: block; }
body{ padding-bottom: 4.5rem; }
.sheet{
height: 90%; margin-top: auto; border-left: 0;
border-top-left-radius: var(--r); border-top-right-radius: var(--r);
}
.bar__in{ min-height: 3.4rem; }
.drawer.is-open{ position: fixed; inset: 3.4rem 0 0 0; overflow-y: auto; padding-top: var(--s4); }
.field input[type="text"], .field select, .field textarea{ font-size: 16px; }
}
@media print{
.thumb, .filters, .quick, .anchor{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
.sheet[open] .rows li{ animation: none; }
.fly{ display: none; }
}
:root{
--peach-lit:  #FCEFE7;
--sheen: linear-gradient(103deg,
rgba(255,255,255,0) 0%, rgba(255,246,240,.9) 34%,
rgba(255,255,255,0) 62%);
}
.sec--band::before{
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%23FFFFFF' opacity='.55'%3E%3Ccircle cx='16' cy='22' r='4'/%3E%3Ccircle cx='31' cy='16' r='3'/%3E%3Ccircle cx='24' cy='34' r='2.5'/%3E%3Ccircle cx='126' cy='118' r='4'/%3E%3Ccircle cx='112' cy='128' r='3'/%3E%3Ccircle cx='131' cy='134' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top, right bottom;
}
.card, .quotes li, .wrapopt, .step, .swatch__soon,
.field input[type="text"], .field select, .field textarea{
background-color: #FFFFFF;
}
.card, .quotes li{
border-radius: 2px;
border: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95),
0 1px 1px rgba(var(--shade), .06),
0 10px 26px -12px rgba(var(--shade), .18);
background-image: var(--sheen);
background-size: 240% 100%;
background-position: 30% 0;
}
.field input[type="text"], .field select, .field textarea{
border: 0; border-radius: 2px;
box-shadow:
inset 0 1px 3px rgba(var(--shade), .13),
inset 0 0 0 1px rgba(90, 55, 35, .12);
}
.field input:focus, .field select:focus, .field textarea:focus{
box-shadow:
inset 0 1px 3px rgba(var(--shade), .1),
inset 0 0 0 2px var(--scarlet);
}
.rule::before, .rule::after{ background: var(--bronze); height: 1px; width: min(120px, 24vw); }
.rule__knot{
background: none; width: 7px; height: 7px; border-radius: 0;
box-shadow: 0 0 0 1px var(--bronze) inset;
transform: rotate(45deg);
}
.bar{
background:
linear-gradient(180deg, rgba(253,229,216,.9), rgba(253,229,216,.99));
border-bottom: 1px solid var(--peach-deep);
}
.head{ position: relative; }
.sec--major .head > h2, .sec--band .head > h2{
background: #FFFFFF;
margin-inline: calc(var(--gut) * -.5);
padding: var(--s3) calc(var(--gut) * .5);
border-radius: 2px;
box-shadow: 0 1px 1px rgba(var(--shade), .05);
}
.palette__leaf{
background: #FFFFFF; border-radius: 2px;
padding: clamp(1.4rem, 3vw, 2.6rem);
}
.grid{ gap: 0; }
.swatch{
padding: var(--s4) var(--s2);
border-inline-end: 1px solid var(--peach-lit);
border-bottom: 1px solid var(--peach-lit);
transition: opacity .18s ease-out;
}
.swatch:nth-child(5n){ border-inline-end: 0; }
.grid:hover .swatch:not(:hover){ opacity: .55; }
.swatch__shot{
border-radius: 0;
border: 8px solid #FFFFFF;
box-shadow: 0 1px 2px rgba(var(--shade), .1), 0 8px 20px -10px rgba(var(--shade), .2);
}
.swatch__shot:hover{ transform: translateY(-3px); }
.swatch__plate{
position: absolute; inset: auto 0 0 0;
background: rgba(255, 255, 255, .93);
padding: .4rem .3rem;
font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink);
}
.swatch__label{ display: none; }
.swatch__native{ margin-top: .5rem; }
.swatch__corner{
position: absolute; top: 0; inset-inline-start: 0;
background: rgba(255, 255, 255, .9); color: var(--ink-dim);
font-size: .58rem; letter-spacing: .1em; padding: .18rem .4rem;
cursor: copy;
}
.swatch__corner.is-copied{ color: var(--scarlet); }
.swatch--duo .swatch__shot{
border-inline-start-color: var(--tint, var(--scarlet));
}
.swatch__shot--soon{
border: 8px solid #FFFFFF;
background-size: 14px 14px, 200% 100%, auto;
}
.picked{
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
margin-bottom: var(--s4); min-height: 34px;
}
.picked:empty{ display: none; }
.picked__one{
display: inline-flex; align-items: center; gap: .35rem;
background: #FFFFFF; border-radius: 2px; padding: .22rem .5rem;
font-size: .74rem; box-shadow: 0 1px 2px rgba(var(--shade), .1);
}
.picked__dot{ width: 11px; height: 11px; border-radius: 50%; background: var(--tint, var(--band)); }
.swatch--featured{ grid-column: span 2; }
.swatch--featured .swatch__shot{ aspect-ratio: 8 / 5; }
.palette__price{
display: inline-block; background: #FFFFFF; color: var(--ink);
padding: .55rem 1.6rem .55rem 1rem; margin-inline: auto;
clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
box-shadow: 0 1px 2px rgba(var(--shade), .12);
font-size: .9rem;
}
.palette__wrapper{ text-align: center; margin-bottom: var(--s5); }
.steps--five{ position: relative; }
.steps--five::before{
content: ''; position: absolute; left: 6%; right: 6%; top: 30px;
}
.steps--five li{
position: relative; background: #FFFFFF; border-radius: 2px;
padding: var(--s3) var(--s2); text-align: center;
box-shadow: 0 1px 2px rgba(var(--shade), .08), 0 10px 24px -14px rgba(var(--shade), .2);
}
.steps--five .steps__n{ margin-inline: auto; background: #FFFFFF; }
.numbers p{
background: var(--band); border-radius: 50%;
width: 148px; height: 148px; margin: 0 auto;
display: grid; align-content: center; padding: var(--s2);
}
.numbers b{ color: var(--ink); }
.pull{
background: #FFFFFF; border: 0; padding: var(--s5) var(--s5) var(--s5) var(--s5);
border-radius: 2px; position: relative; max-width: 46ch;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px -16px rgba(var(--shade), .22);
}
.pull::after{
content: ''; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px;
background: linear-gradient(45deg, var(--band) 0 50%, transparent 50%);
}
.vs{ background: #FFFFFF; border-radius: 2px; overflow: hidden; }
.vs th, .vs td{ border-bottom: 1px solid var(--peach-lit); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td{ border-bottom: 0; }
.asks details{ background: #FFFFFF; border-bottom: 0; margin-bottom: 2px; border-radius: 2px; }
.asks summary{ padding-inline: var(--s3); }
.asks p{ padding-inline: var(--s3); }
.asks details[open]{ background: var(--peach-lit); }
.asks details::before{ left: 0; }
.sheet{ box-shadow: -18px 0 50px -24px rgba(var(--shade), .35); }
.sheet__foot{ background: var(--band); border-top: 1px solid var(--peach-deep); }
.rows li:nth-child(odd){ background: transparent; }
.rows li{ border-bottom: 1px solid var(--peach-lit); }
.bill dd.is-total{ background: var(--peach-deep); color: var(--ink); }
.bill__next{ background: #FFFFFF; color: var(--garnet); }
.bill__bar{
height: 5px; background: #FFFFFF; border-radius: 3px; overflow: hidden;
margin-top: var(--s2);
}
.bill__bar span{
display: block; height: 100%; background: var(--scarlet);
transform-origin: 0 50%; transform: scaleX(var(--p, 0));
transition: transform .3s ease-out;
}
.basket__list{ list-style: none; margin: var(--s2) 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--s2); }
.basket__list li{ display: flex; align-items: center; gap: .4rem; font-size: .84rem; }
.basket__list img, .basket__chip{ width: 30px; height: 30px; border-radius: 2px; object-fit: cover; }
.basket__chip{ display: block; box-shadow: inset 0 0 0 1px rgba(90,55,35,.2); }
.again{ display: inline-flex; align-items: center; gap: .3rem; }
.again img, .again span[data-tint]{ width: 22px; height: 22px; border-radius: 2px; }
.again span[data-tint]{ display: block; }
.foot{ background: var(--band); color: var(--ink); }
.foot .foot__h{ color: var(--garnet); }
.foot a{ color: var(--ink-dim); }
.foot a:hover{ color: var(--ink); }
.foot__ribbon{ background: var(--peach-deep); }
.foot__end{ border-top: 1px solid var(--peach-deep); }
.foot .law{ color: var(--ink-dim); }
.foot__law summary{ color: var(--ink-dim); }
.seal{ box-shadow: 2px 5px 10px -3px rgba(var(--shade), .45); }
.foot .sign{ color: var(--garnet); }
.look{ background: rgba(38, 22, 14, .97); }
.look::backdrop{ background: rgba(38, 22, 14, .93); }
.look__nav{ background: rgba(38, 22, 14, .5); }
@media (max-width: 1000px){
.swatch:nth-child(5n){ border-inline-end: 1px solid var(--peach-lit); }
}
@media (max-width: 620px){
.numbers p{ width: 128px; height: 128px; }
.steps--five::before{ display: none; }
.sec--major .head > h2, .sec--band .head > h2{ margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce){
.grid:hover .swatch:not(:hover){ opacity: 1; }
}
body{ background: var(--paper); }
.cloth{
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h3v3H0zM3 3h3v3H3z' fill='%23000' opacity='.03'/%3E%3Cpath d='M3 0h3v3H3zM0 3h3v3H0z' fill='%23fff' opacity='.035'/%3E%3C/svg%3E"),
radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 62%, rgba(120,70,45,.045) 100%),
radial-gradient(70% 55% at 12% 6%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%),
radial-gradient(75% 60% at 92% 96%, rgba(235,199,182,.75), rgba(235,199,182,0) 72%),
linear-gradient(104deg,
rgba(255,255,255,0) 0%, rgba(255,248,242,.55) 26%,
rgba(255,255,255,0) 44%, rgba(235,199,182,.35) 68%,
rgba(255,255,255,0) 86%),
linear-gradient(178deg, #FEEDE3 0%, #FDE5D8 38%, #F8DCCC 100%);
}
main{
background-image:
repeating-linear-gradient(90deg,
rgba(255,255,255,.3) 0 1px, rgba(255,255,255,0) 1px 450px,
rgba(235,199,182,.22) 450px 451px, rgba(255,255,255,0) 451px 900px);
}
.sec--band:nth-of-type(even){ background: #F8DBCD; }
.bar::after{
content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
background: linear-gradient(180deg, rgba(235,199,182,.5), rgba(235,199,182,0));
pointer-events: none;
}
.card, .quotes li, .palette__leaf, .steps--five li, .pull, .vs, .form__basket{
background-image: var(--sheen);
background-size: 260% 100%;
background-position: 28% 0;
background-repeat: no-repeat;
}
.wrap--narrow{
background: radial-gradient(80% 70% at 50% 40%,
rgba(255,253,251,.75), rgba(255,253,251,0) 78%);
}
.edge{
width: 8px;
background:
linear-gradient(90deg,
rgba(255,255,255,.6) 0 1px,
rgba(255,255,255,.2) 1px 3px,
rgba(0,0,0,.16) 6px 8px),
linear-gradient(180deg, var(--scarlet), #A81E2C);
}
.edge::after{
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
background: inherit;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
}
.sec::before{
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg%3E%3Ccircle cx='18' cy='26' r='6' fill='%23fff' opacity='.72'/%3E%3Ccircle cx='16' cy='24' r='2' fill='%23fff'/%3E%3Ccircle cx='19' cy='31' r='6' fill='%23C9A38E' opacity='.16'/%3E%3Ccircle cx='36' cy='16' r='4' fill='%23fff' opacity='.66'/%3E%3Ccircle cx='35' cy='15' r='1.4' fill='%23fff'/%3E%3Ccircle cx='27' cy='40' r='3' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='8' cy='47' r='2.4' fill='%23fff' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
}
.sec > *{ position: relative; z-index: 1; }
.head > .brow::after{
content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
background: radial-gradient(circle at 35% 32%, #fff, #EBC7B6);
box-shadow: 0 1px 1px rgba(120,70,45,.28);
margin-inline-start: auto;
}
.ribboned--pearl li::before{
width: 8px; height: 8px; border-radius: 50%; clip-path: none;
background: radial-gradient(circle at 35% 32%, #fff, #EBC7B6);
box-shadow: 0 1px 1px rgba(120,70,45,.25);
}
.hero__facts{ gap: var(--s2) 0; }
.hero__facts::before{ content: none; }
.steps--five::before{
background:
repeating-linear-gradient(90deg,
var(--peach-deep) 0 9px, rgba(0,0,0,0) 9px 17px);
height: 2px;
}
.sec--hero::after{
content: ''; position: absolute; right: 2%; top: 8%;
width: 96px; height: 96px; pointer-events: none; opacity: .5;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cpath d='M48 16c-18 0-30 10-30 22s12 20 30 20 30-8 30-20-12-22-30-22z' stroke='%23EBC7B6' stroke-width='3'/%3E%3Cpath d='M30 60 18 92l14-7 6 8 8-30M66 60l12 32-14-7-6 8-8-30' stroke='%23EBC7B6' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.card, .quotes li, .steps--five li{
outline: 1px dashed rgba(235, 199, 182, .85);
outline-offset: -6px;
}
.head{ isolation: isolate; }
.head::before{
content: ''; position: absolute; right: 0; top: -18px;
width: 120px; height: 120px; z-index: -1; opacity: .06; pointer-events: none;
background: url("../assets/icons/knot.svg") no-repeat center / contain;
}
.swatch--featured .swatch__shot::before{
content: ''; position: absolute; left: -34px; top: 16px; z-index: 2;
width: 120px; height: 20px; background: var(--scarlet);
transform: rotate(-45deg);
}
.palette__leaf{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px),
96% 100%, 92% calc(100% - 7px), 88% 100%, 84% calc(100% - 8px),
80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 9px),
64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 8px),
48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 9px),
32% 100%, 28% calc(100% - 7px), 24% 100%, 20% calc(100% - 8px),
16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 8px), 0 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.palette__sheet{
border-radius: 2px;
box-shadow: 0 2px 4px -2px rgba(var(--shade), .08),
0 18px 44px -20px rgba(var(--shade), .22);
}
.pull::before{
content: ''; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px;
box-shadow: -3px -3px 6px -2px rgba(var(--shade), .3);
}
.foot{ position: relative; overflow: hidden; }
.foot::after{
content: ''; position: absolute; right: -30px; bottom: -30px;
width: 220px; height: 220px; opacity: .07; pointer-events: none;
background: url("../assets/icons/knot.svg") no-repeat center / contain;
}
.marks{ position: fixed; inset: 0; z-index: 94; pointer-events: none; }
.marks i{
position: absolute; width: 15px; height: 15px; opacity: .5;
background:
linear-gradient(var(--peach-deep), var(--peach-deep)) center / 1px 100% no-repeat,
linear-gradient(var(--peach-deep), var(--peach-deep)) center / 100% 1px no-repeat;
}
.marks i:nth-child(1){ left: 14px; top: 70px; }
.marks i:nth-child(2){ right: 14px; top: 70px; }
.marks i:nth-child(3){ left: 14px; bottom: 14px; }
.marks i:nth-child(4){ right: 14px; bottom: 14px; }
#sizeCard{
border-inline-start: 0;
background-image:
repeating-linear-gradient(180deg,
var(--peach-deep) 0 1px, rgba(0,0,0,0) 1px 10px),
var(--sheen);
background-size: 7px 100%, 260% 100%;
background-position: left top, 28% 0;
background-repeat: no-repeat, no-repeat;
padding-inline-start: calc(var(--s4) + 10px);
}
.code{
font-size: .58rem; letter-spacing: .3em; color: var(--ink-dim);
text-align: center; margin-top: var(--s5); user-select: none;
}
.foot__struck{
text-align: center; font-size: .58rem; letter-spacing: .22em;
color: var(--ink-dim); margin: calc(var(--s5) * -1) 0 var(--s5);
}
.sec__folio{
position: absolute; right: var(--gut); bottom: var(--s3);
font-size: .58rem; letter-spacing: .2em; color: var(--ink-dim);
pointer-events: none; user-select: none;
}
.sec--band::after{
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
pointer-events: none;
background: linear-gradient(180deg, rgba(253,229,216,0), rgba(253,229,216,.9));
}
.sec--band:not([class*="seam-"]){ box-shadow: 0 22px 30px -30px rgba(var(--shade), .5); }
.seam-wave{
clip-path: polygon(0 22px, 6% 6px, 14% 20px, 22% 4px, 32% 18px, 42% 4px,
52% 20px, 62% 6px, 72% 20px, 82% 6px, 92% 18px, 100% 6px,
100% 100%, 0 100%);
}
.seam-slant{ clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
.seam-slant-back{ clip-path: polygon(0 0, 100% 26px, 100% 100%, 0 100%); }
.seam-fold::before{
content: ''; position: absolute; left: 0; top: 0; width: 46px; height: 46px;
background: linear-gradient(135deg, var(--peach-deep) 0 50%, transparent 50%);
z-index: 2;
}
.sec--hero{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px),
93% 100%, 86% calc(100% - 9px), 79% 100%, 72% calc(100% - 11px),
65% 100%, 58% calc(100% - 8px), 51% 100%, 44% calc(100% - 11px),
37% 100%, 30% calc(100% - 8px), 23% 100%, 16% calc(100% - 10px),
9% 100%, 0 calc(100% - 8px));
}
.frame{
position: fixed; inset: 12px; z-index: 93; pointer-events: none;
border: 1px solid rgba(235, 199, 182, .55);
border-radius: 6px;
}
.asks details::before{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 50% 100%, 0 calc(100% - 5px));
}
@media (max-width: 900px){
.marks, .frame{ display: none; }
.sec--hero::after{ display: none; }
.head::before{ display: none; }
main{ background-image: none; }
}
@media print{
.cloth, .marks, .frame, .sec__folio, .code{ display: none !important; }
body::after{
content: ''; position: fixed; inset: 30% 30%; opacity: .06;
background: url("../assets/icons/knot.svg") no-repeat center / contain;
}
}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
@keyframes rise-in{
from{ opacity: 0; transform: translateY(20px); }
to  { opacity: 1; transform: none; }
}
@keyframes open-out{ from{ transform: scaleX(.2); } to{ transform: none; } }
@keyframes slide-under{
from{ opacity: 0; transform: translateY(14px); }
to  { opacity: 1; transform: none; }
}
.sec .cards, .sec .steps, .sec .pair, .sec .vs,
.sec .palette__sheet, .sec .asks, .sec .numbers, .sec .parts{
animation: rise-in linear both;
animation-timeline: view();
animation-range: entry 5% cover 26%;
}
.rule{
animation: open-out linear both;
animation-timeline: view();
animation-range: entry 0% entry 70%;
}
.head > h2{
animation: slide-under linear both;
animation-timeline: view();
animation-range: entry 10% cover 20%;
}
}
}
@supports (transition-behavior: allow-discrete){
.sheet, .look{
transition:
opacity .22s ease-out,
transform .22s ease-out,
overlay .22s allow-discrete,
display .22s allow-discrete;
}
.sheet{ animation: none; }
.sheet:not([open]){ display: none; opacity: 0; transform: translateX(26px); }
.look:not([open]){ display: none; opacity: 0; }
@starting-style{
.sheet[open]{ opacity: 0; transform: translateX(26px); }
.look[open]{ opacity: 0; }
}
.look[open]{ animation: none; }
}
@supports (view-transition-name: a){
#lookImg{ view-transition-name: rose; }
::view-transition-group(rose){ animation-duration: .34s; }
::view-transition-old(rose), ::view-transition-new(rose){
animation-duration: .34s; mix-blend-mode: normal;
}
}
.card, .quotes li, .steps--five li, .palette__leaf{ position: relative; overflow: hidden; }
.card::after, .quotes li::after, .steps--five li::after{
content: ''; position: absolute; inset: -20% -60%;
background: linear-gradient(104deg,
rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%);
transform: translateX(-42%);
opacity: 0;
transition: transform .55s ease-out, opacity .2s;
pointer-events: none;
}
.card:hover::after, .quotes li:hover::after, .steps--five li:hover::after{
transform: translateX(42%); opacity: 1;
}
.swatch__see{
transform: translateY(100%);
transition: transform .22s ease-out, opacity .22s ease-out;
}
.swatch__shot:hover .swatch__see, .swatch__shot:focus-visible .swatch__see{
transform: none; opacity: 1;
}
.fold::after{ transition: transform .2s ease-out; transform-origin: 100% 0; }
.fold:hover::after{ transform: scale(1.25); }
.seal{ transition: transform .14s ease-out; }
.foot .seal:hover{ transform: scale(.97); }
@keyframes chip-in{
from{ opacity: 0; transform: scale(.78); }
to  { opacity: 1; transform: none; }
}
.picked__one.is-new{ animation: chip-in .22s ease-out both; }
@keyframes swap{ from{ opacity: .3; } to{ opacity: 1; } }
.grid.is-swapping{ animation: swap .24s ease-out; }
.look__prev:hover{ transform: translateY(-50%) translateX(-4px) rotate(-6deg); }
.look__next:hover{ transform: translateY(-50%) translateX(4px) rotate(6deg); }
.swatch__shot--soon::after{
content: ''; position: absolute; inset: 0;
background: linear-gradient(104deg,
rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%);
transform: translateX(-60%); opacity: 0;
transition: transform .6s ease-out, opacity .2s;
pointer-events: none;
}
.swatch:hover .swatch__shot--soon::after{ transform: translateX(60%); opacity: 1; }
@media (prefers-reduced-motion: no-preference){
@keyframes unroll{ from{ transform: scaleY(0); } to{ transform: none; } }
@keyframes draw{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0); } }
@keyframes dot-in{ from{ opacity: 0; transform: scale(.5); } to{ opacity: 1; transform: none; } }
@keyframes lift{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes pearl-in{ from{ opacity: 0; } to{ opacity: 1; } }
.edge{ transform-origin: 50% 0; animation: unroll .6s ease-out both; }
.bar .brand__logo{ animation: draw .5s ease-out .15s both; }
.dots li{ animation: dot-in .3s ease-out both; animation-delay: calc(var(--i, 0) * 40ms + .3s); }
main{ animation: lift .35s ease-out both; }
.sec--hero::before{ animation: pearl-in .5s ease-out .45s both; }
}
@keyframes stamp{
from{ opacity: 0; transform: scale(1.45) rotate(-9deg); }
60% { opacity: 1; transform: scale(.97) rotate(2deg); }
to  { opacity: 1; transform: none; }
}
.form.is-done .form__done .seal{ animation: stamp .45s cubic-bezier(.2, 1.1, .35, 1) both; }
@keyframes total-note{
from{ opacity: .25; transform: translateY(-2px); }
to  { opacity: 1; transform: none; }
}
@keyframes caught{
0%  { transform: none; }
40% { transform: scale(1.06); }
100%{ transform: none; }
}
.is-caught{ animation: caught .16s ease-out; }
@media (prefers-reduced-motion: reduce){
.card::after, .quotes li::after, .steps--five li::after,
.swatch__shot--soon::after{ display: none; }
.swatch__see{ transform: none; }
}
.shelf{
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
grid-template-columns: repeat(3, 1fr);
}
.made{
background: #FFFFFF; border-radius: 2px; overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
0 2px 4px -2px rgba(var(--shade), .08),
0 16px 40px -20px rgba(var(--shade), .22);
display: flex; flex-direction: column;
}
.made__shot{
display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
background: none; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
}
.made__shot img{ width: 100%; height: 100%; object-fit: cover; }
.made__tag{
position: absolute; left: 0; top: var(--s3);
background: var(--scarlet); color: #fff;
font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
padding: .3rem .8rem .3rem .6rem;
clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}
.made__body{ padding: var(--s3); display: grid; gap: var(--s2); }
.made__name{ font-family: var(--display); font-size: 1.2rem; }
.made__meta{ font-size: .78rem; color: var(--fg-dim); }
.made__price{
font-family: var(--display); font-size: 1.5rem; color: var(--garnet);
font-variant-numeric: tabular-nums;
}
.made--sold{ opacity: .72; }
.made--sold .made__price{ color: var(--fg-dim); text-decoration: line-through; }
.made--sold .made__shot{ cursor: default; }
.made--sold .made__tag{ background: var(--ink-dim); }
@media (max-width: 1000px){ .shelf{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .shelf{ grid-template-columns: 1fr; } }
.brand__logo{ width: 210px; height: auto; display: block; }
.brand__logo--foot{ width: 230px; }
@media (max-width: 620px){
.brand__logo{ width: 160px; }
}
.card, .quotes li, .steps--five li, .pull, .vs, .form__basket, .swatch__soon{
border: 4px solid transparent;
border-image: url("../assets/img/ribbon-satin.webp") 24 / 4px / 0 round;
outline: 0;
}
.card--wide, .pull{
border-image-source: url("../assets/img/ribbon-garnet.webp");
}
@media (prefers-reduced-motion: no-preference){
.card, .quotes li, .steps--five li, .pull, .vs{
transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease-out;
}
}
@media (hover: hover){
.card:hover, .quotes li:hover, .steps--five li:hover, .pull:hover, .vs:hover{
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95),
0 2px 4px rgba(var(--shade), .08),
0 20px 40px -18px rgba(var(--shade), .28);
}
}