/* Public site styles (new design). Light only; colours are tokens on :root. */
/* Self-hosted Golos Text and Unbounded (variable, Cyrillic + Latin subsets from Google Fonts).
   The "… fallback" faces are Arial scaled to the web fonts' widths and line metrics, so text
   keeps its size and lines keep their breaks when the real font swaps in. */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/golos-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/golos-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:103.74%;ascent-override:94.47%;descent-override:21.21%;line-gap-override:0%}
@font-face{font-family:"Unbounded fallback";font-weight:500 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:130.69%;ascent-override:76.14%;descent-override:18.75%;line-gap-override:0%}
:root{
  color-scheme:light;
  --ground:#F4F3EF; --surface:#FFFFFF; --well:#DDDCD8;
  --ink:#17141F; --ink-2:#565061; --line:#DCD8D0;
  --madder:#B3232D; --on-madder:#FFFFFF; --gold:#BF8A1E; --blue:#2C3C94; --green:#2F7A3B;
  --stitch-k:#17141F; --scrim:rgba(14,12,18,.94);
  --thread:var(--madder);
  --display:"Unbounded","Unbounded fallback","Arial Black",system-ui,sans-serif;
  --body:"Golos Text","Golos fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Golos Text","Golos fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1); --fast:150ms; --slow:300ms;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--madder);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;text-wrap:balance;margin:0}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.icon{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.mono{font-family:var(--mono)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:16px;white-space:nowrap;flex:none}
.brand canvas{width:22px;height:22px}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:999px;white-space:nowrap;color:var(--ink-2);transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.nav a[aria-current="page"]{color:var(--on-madder);background:var(--madder)}
@media (max-width:860px){
  .top .wrap{flex-wrap:wrap;gap:0;padding-block:8px}
  .nav{margin-left:-12px;width:calc(100% + 12px);padding-block:4px 0}
  .brand{white-space:normal;flex:0 1 auto;min-width:0;line-height:1.25}  /* the full name wraps on the narrowest phones */
}

main{min-height:60vh}
.view{animation:rise var(--slow) var(--ease) both}
@keyframes rise{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* stitch band */
.band{display:block;width:100%;height:105px}
@media (max-width:559px){.band{height:75px}}  /* 15 stitch rows at 7px / 5px, what drawBand() sets; here so nothing jumps before the script runs */

/* hero */
.hero{padding-block:clamp(24px,4vw,48px) 0}
.hero h1{font-weight:800;font-size:clamp(2.2rem,3.6vw,3.25rem);letter-spacing:-.02em;line-height:1;text-transform:uppercase;margin:0 0 24px}
.hero h1 span{display:block;color:var(--madder)}
.hero-band{margin-block:0 clamp(32px,4vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,7vw,112px);align-items:center}
.hero-copy p{font-size:clamp(18px,1.6vw,20px);max-width:32ch;margin:0 0 24px}
.hero-photo{margin:0;position:relative}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%;border-radius:8px}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr}.hero-copy p{max-width:none}}

.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:500;font-size:15px;padding:12px 20px;border-radius:8px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn.solid{background:var(--madder);border-color:var(--madder);color:var(--on-madder)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* sections */
.sec{padding-block:clamp(48px,7vw,88px) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.8rem);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.more{display:inline-flex;align-items:center;gap:4px;font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:2px;transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.more:hover{color:var(--madder);border-color:var(--madder)}

/* regions */
.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.regions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.region{flex-direction:column;align-items:flex-start;padding:20px}.region b{font-size:14px}}
.region{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;text-decoration:none;display:flex;align-items:center;gap:16px;transition:border-color var(--fast) var(--ease)}
.region:hover{border-color:var(--ink)}
.region:hover b{color:var(--madder)}
.region canvas{width:44px;height:44px}
.region b{font-family:var(--display);font-weight:700;font-size:18px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2vw,28px) clamp(12px,1.6vw,24px)}
.grid.feat{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px}
.card .img{position:relative;aspect-ratio:3/4;background:var(--well);overflow:hidden;border-radius:8px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--slow) var(--ease)}
.card img.alt{opacity:0}
.card:hover img.alt{opacity:1}
@media (hover:none){.card img.alt{display:none}}  /* no hover on touch screens; hidden lazy images are never downloaded */
.card .cid{position:absolute;top:8px;left:8px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:4px}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card :is(h2,h3){font-family:var(--body);font-weight:500;font-size:16px;line-height:1.3;transition:color var(--fast) var(--ease)}
.card .reg{font-size:13px;color:var(--ink-2)}
.card .price{font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap}
.card:hover :is(h2,h3){color:var(--madder)}
.card.lead{grid-column:span 2;grid-row:span 2}
.card.lead :is(h2,h3){font-size:20px}
@media (max-width:520px){.card :is(h2,h3){font-size:14px}.card .price{font-size:13px}.card .meta{flex-direction:column;gap:2px}}

/* gallery mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mosaic button{padding:0;border:0;background:var(--well);cursor:zoom-in;overflow:hidden;border-radius:8px;aspect-ratio:3/4;position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity var(--fast) var(--ease)}
.mosaic button:hover img,.masonry button:hover img{opacity:.88}
.mosaic .big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:640px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}
.masonry{columns:3 280px;column-gap:8px}
.masonry button{display:block;width:100%;padding:0;border:0;margin-bottom:8px;background:var(--well);cursor:zoom-in;break-inside:avoid;border-radius:8px;overflow:hidden;position:relative}
.masonry img{display:block;width:100%;transition:opacity var(--fast) var(--ease)}

/* catalogue page */
.page-head{padding-block:clamp(28px,5vw,56px) 24px}
.page-head h1{font-size:clamp(2.2rem,3.6vw,3.25rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;margin:0}
.page-head p{color:var(--ink-2);margin:12px 0 0;font-size:18px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;padding-block:16px;border-block:1px solid var(--line);margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:transparent;padding:6px 12px;border-radius:999px;font-size:14px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.sort select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px}

/* product */
.crumbs{font-size:14px;color:var(--ink-2);padding-block:24px 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--madder)}
.pd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding-block:20px 0;align-items:start}
@media (max-width:860px){.pd{grid-template-columns:minmax(0,1fr)}}
.shots{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}
.thumbs{display:flex;flex-direction:column;gap:8px}
.thumbs button{padding:0;border:1.5px solid transparent;background:var(--well);aspect-ratio:3/4;cursor:pointer;border-radius:4px;overflow:hidden;transition:border-color var(--fast) var(--ease)}
.thumbs button[aria-current="true"]{border-color:var(--madder)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.main-shot{position:relative;padding:0;border:0;background:var(--well);aspect-ratio:3/4;cursor:zoom-in;overflow:hidden;border-radius:8px}
.main-shot img{width:100%;height:100%;object-fit:cover;display:block}
.main-shot .hint{position:absolute;right:12px;bottom:12px;background:var(--surface);color:var(--ink);font-size:13px;padding:6px 12px;border-radius:8px;display:flex;gap:8px;align-items:center;transition:opacity var(--fast) var(--ease)}
@media (pointer:fine){.main-shot:hover .hint{opacity:0}}
@media (max-width:520px){.shots{grid-template-columns:minmax(0,1fr)}.thumbs{flex-direction:row;order:2;overflow-x:auto}.thumbs button{width:64px;flex:none}}
.info{position:sticky;top:96px}
@media (max-width:860px){.info{position:static}}
.info h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;margin-block:0 16px}
.info .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.info .big{font-family:var(--mono);font-size:32px;font-weight:500}
.info .big small{font-size:14px;color:var(--ink-2);font-weight:400;margin-right:8px}
.desc{padding-block:16px;display:flex;flex-direction:column;gap:12px}
.desc p{margin:0;max-width:60ch}
.desc h2{margin:8px 0 0;font-family:var(--mono);font-size:13px;line-height:inherit;color:var(--ink-2);font-weight:500}
.desc dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 16px}
.desc dt{font-weight:600}.desc dd{margin:0;color:var(--ink-2)}
.parts{border:1px solid var(--line);border-radius:12px;margin-block:4px 16px;background:var(--surface);padding:12px}
.parts h2{margin:0;padding:12px 16px;font-family:var(--mono);font-size:13px;line-height:inherit;color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line);margin-inline:4px}
.parts ul{list-style:none;margin:0;padding:4px 16px}
.parts li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.parts li:last-child{border-bottom:0}
.parts li b{font-weight:500}
.parts .mono{white-space:nowrap}
.tbl{overflow-x:auto;margin-block:4px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-weight:500;font-size:13px}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:500}
tr.hl td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.order{--thread:var(--gold);margin-top:8px;padding:32px;background:var(--ink);color:var(--ground);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.order p{margin:0;font-size:15px}
.cidb{font-family:var(--mono);background:var(--madder);color:var(--on-madder);padding:1px 8px;border-radius:4px;font-weight:500}
.order .btns .btn{border-color:var(--ground);color:var(--ground)}
.order .btns .btn:hover{background:var(--ground);color:var(--ink)}
.sizebtn{align-self:flex-start;margin-block:0 16px}
.info{display:flex;flex-direction:column}

/* sizes & contacts */
.sizes{display:grid;gap:40px}
.sizes h2{font-size:24px;margin-bottom:12px}
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.contact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:8px}
.contact .v{font-family:var(--mono);font-size:clamp(16px,1.8vw,19px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.contact .v a,.contact .v span{white-space:nowrap}
@media (max-width:640px){.contacts{grid-template-columns:1fr}}
.copy{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 12px;transition:border-color var(--fast) var(--ease);font-size:13px;cursor:pointer;font-family:var(--body);flex:none}
.copy:hover{border-color:var(--ink)}

/* footer */
footer{margin-top:clamp(64px,9vw,120px);background:var(--ink);color:var(--ground);padding-block:0 32px}
footer .band{margin-bottom:40px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
.foot h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;text-transform:uppercase}
.foot p{margin:12px 0 0;opacity:.75;max-width:36ch}
.foot h3{margin:0 0 12px;font-family:var(--mono);font-size:13px;line-height:inherit;opacity:.6;font-weight:400}
.foot a{text-decoration:none;display:block;padding:4px 0;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--gold)}
.fine a{display:inline;padding:0}
.fine .heart{text-decoration:none}
.fine .heart .icon{fill:var(--madder);stroke:var(--madder);vertical-align:-2px}
.tbl-title{margin:0 0 8px;line-height:inherit}
.fine{margin-top:40px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--ground) 18%,transparent);font-size:13px;opacity:.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}


/* lightbox */
.lb{position:fixed;inset:0;height:100%;z-index:50;background:var(--scrim);display:grid;grid-template-rows:auto 1fr auto auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
.lb-top{display:flex;justify-content:space-between;align-items:center;color:#EFEDE8;font-family:var(--mono);font-size:13px;padding-inline:4px}
.lb-stage{position:relative;overflow:hidden;min-height:0;margin-block:12px}
.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
@media (pointer:fine){.lb-stage img,.main-shot img{cursor:none}}
.lb.nolens .lb-zoom,.lb.nolens .lb-help{display:none}
.lb.nolens .lb-stage img{cursor:default;touch-action:auto}
.lb-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lb-zoom{display:flex;align-items:center;gap:4px}
.lb .lb-zoom button{padding:4px 12px;font-size:16px;line-height:1.2}
.lb-zoom output{min-width:44px;text-align:center}
.lb-help{opacity:.65}
@media (max-width:640px){.lb-help{display:none}}
.loupe{position:fixed;z-index:60;left:0;top:0;pointer-events:none;border-radius:50%;background-repeat:no-repeat;background-color:var(--well);box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--madder),0 22px 48px -14px rgba(0,0,0,.6);will-change:transform}
.loupe::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:linear-gradient(var(--madder),var(--madder)) center/100% 1.5px no-repeat,linear-gradient(var(--madder),var(--madder)) center/1.5px 100% no-repeat;opacity:.75}
.loupe b{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:500 12px/1.4 var(--mono);background:var(--surface);color:var(--ink);padding:1px 8px;border-radius:999px}
.lb button{background:rgba(255,255,255,.1);color:#EFEDE8;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--fast) var(--ease)}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb-nav{display:flex;justify-content:center;gap:8px}
/* products seen in a gallery photo */
.lb-tags{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;color:#EFEDE8;min-width:0}
.lb-tags-label{font-size:13px;opacity:.65;flex:none}
.lb-tags-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;min-width:0}
.lb-tag{display:flex;align-items:center;gap:12px;flex:none;padding:4px 16px 4px 4px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);text-decoration:none;transition:background var(--fast) var(--ease)}
.lb-tag:hover{background:rgba(255,255,255,.18)}
.lb-tag img{width:40px;height:52px;object-fit:cover;border-radius:4px;background:var(--well)}
.lb-tag span{display:flex;flex-direction:column;line-height:1.3}
.lb-tag b{font-weight:500;font-size:14px}
.lb-tag small{font-family:var(--mono);font-size:12px;opacity:.7}
@media (max-width:640px){.lb-tags{flex-direction:column;align-items:stretch;gap:8px}.lb-tags-label{display:none}}
.tagcount{position:absolute;left:8px;bottom:8px;background:var(--surface);color:var(--ink);font-size:12px;padding:2px 8px;border-radius:4px;pointer-events:none}
/* sewn edges: stitches are drawn on a canvas laid over each [data-sew] element (see sew() in the script) */
[data-sew]:not(.top){position:relative}
canvas.sew{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
img{max-width:100%}
[hidden]{display:none!important}