/* ══════════════════════════════════════════════════════════════
   MJÚK — inner pages (shop, product, fibres, stores, story, staff)
   Built on the shell's own tokens and grammar: Humane headings via
   .head, Space Mono labels via .mono, .prod cards, .rv reveals.
   Adds no colour to the palette.
   ══════════════════════════════════════════════════════════════ */

/* the first section sits under the fixed 66px nav; no preloader on these pages */
body[data-page] main > section:first-child{padding-top:calc(66px + clamp(36px,5vw,70px))}
body[data-page] .bars{opacity:.18}

/* ── breadcrumb ──────────────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:0 var(--pad);margin-bottom:clamp(22px,3vw,40px)}
.crumb a{color:var(--dim);transition:color .3s}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;color:var(--faint)}
.crumb__back{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:none;border:0;border-right:1px solid var(--line);padding:0 14px 0 0;margin:0 4px 0 0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
@media (hover:hover) and (pointer:fine){.crumb__back:hover{color:var(--accent)}}
.crumb__back:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.crumb span{color:var(--ink)}

/* ── text reveal: words rise out of their own line ───────────── */
.tr .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.tr .w i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform 1.1s var(--ease) calc(var(--i,0)*55ms)}
.tr.in .w i{transform:none}
@media(prefers-reduced-motion:reduce){.tr .w i{transform:none;transition:none}}

/* ── product grid (shop, fibre chapters) ─────────────────────── */
.pgrid{padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(34px,4vw,60px) clamp(12px,1.6vw,26px)}
.pgrid .prod{width:auto;min-width:0}
.pgrid .prod.rv{transition-delay:calc((var(--i,0)) * 70ms)}
.prod--oos .prod__im img{opacity:.55!important;filter:saturate(.7)}
.prod--oos .prod__sizes{transform:none;right:auto}
.pg__more{display:flex;justify-content:center;padding:clamp(40px,6vw,70px) var(--pad) 0}
#more[hidden],#stfMore[hidden]{display:none}
.pg__empty{padding:clamp(40px,6vw,80px) var(--pad);font-family:var(--ff-s);font-size:clamp(20px,2.4vw,30px);color:var(--dim)}
.pg__empty .link{display:inline-block;margin-top:0;font-family:var(--ff-m);font-size:11px;color:var(--accent);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),opacity .2s var(--ease)}
@media(hover:hover) and (pointer:fine){.pg__empty .link:hover{background-size:100% 1px}}
.pg__empty .link:active{opacity:.7}
/* both buttons are one line of 11 px mono: padding gives a finger 40 px, the underline stays under the words */
.pg__empty .link,.pg__more .link{padding:10px 0;background-origin:content-box}
.pg__more .link{transition:background-size .5s var(--ease),opacity .2s var(--ease)}
.pg__more .link:active{opacity:.7}
@media(max-width:1024px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}}

/* ── filters ─────────────────────────────────────────────────── */
.filt{padding:0 var(--pad);margin:calc(-1 * clamp(18px,3vw,44px)) 0 clamp(34px,5vw,64px);display:grid;gap:14px;
  border-top:1px solid var(--line);padding-top:18px}
.filt__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filt__row > .mono{min-width:72px;color:var(--dim)}
.chip{font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  padding:8px 13px;border:1px solid var(--line);background:transparent;
  transition:border-color .24s var(--ease),background .24s var(--ease),color .24s var(--ease),transform .16s var(--ease)}
.chip:active{transform:scale(.97)}
@media(hover:hover){.chip:hover{border-color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip small{margin-left:6px;color:var(--dim);letter-spacing:.02em}
.chip[aria-pressed="true"] small{color:var(--faint)}
.filt__sw{gap:10px}
/* a colour is a swatch, never a word: a soft round of the knit's colour, a ring when chosen */
.chip.sw{width:24px;height:24px;padding:0;border-radius:999px;border:0;background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(23,18,26,.12),0 0 0 0 var(--bg),0 0 0 0 var(--ink);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){.chip.sw:hover{transform:scale(1.12)}}
.chip.sw[aria-pressed="true"]{background:var(--sw);box-shadow:inset 0 0 0 1px rgba(23,18,26,.12),0 0 0 3px var(--bg),0 0 0 4px var(--ink)}
.chip.sw:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
.filt__end{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.filt__q{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px;min-width:200px}
.filt__q input{flex:1;background:none;border:0;color:var(--ink);font-family:var(--ff-m);font-size:13px;letter-spacing:.02em}
.filt__q input::placeholder{color:var(--dim)}
.filt__q input:focus{outline:none}
.filt__q:focus-within{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 20px 6px 0;color:var(--ink);
  font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sel::after{content:"↓";position:absolute;right:2px;top:50%;transform:translateY(-55%);font-family:var(--ff-m);font-size:11px;color:var(--dim);pointer-events:none}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.chk input{appearance:none;width:14px;height:14px;border:1px solid var(--line);margin:0;display:grid;place-items:center;transition:background .2s,border-color .2s}
.chk input:checked{background:var(--accent);border-color:var(--accent)}
.chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){.filt__row > .mono{min-width:0;width:100%}.filt__end{margin-left:0;width:100%}
  /* the shell keeps head__end labels on one line; on a phone a long one must wrap instead of pushing the page wide */
  body[data-page] .head__end .mono{white-space:normal;max-width:none;line-height:1.5}}

/* ── product page ────────────────────────────────────────────── */
.pdp{padding-bottom:clamp(40px,6vw,90px)!important}
.pdp__grid{padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.pdp__gal{display:grid;gap:clamp(10px,1.4vw,20px);grid-template-columns:1fr}
.pdp__gal.two{grid-template-columns:1fr 1fr}
/* bigger photos (her notes, 23 and 29 Oct): the first shot takes the whole gallery width, the rest pair up, and a last one left alone spans too */
.pdp__gal.two .pdp__fig:first-child,.pdp__gal.two .pdp__fig:last-child:nth-child(even){grid-column:1/-1}
.pdp__fig{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);margin:0}
/* the clip lives on the IMAGE, never on the observed figure: Chrome applies a
   target's own clip-path when it measures intersection, so a figure clipped to
   nothing never intersects and never reveals. Same lesson as hidden vs display. */
.pdp__fig.rv{opacity:1;transform:none;transition:none}
.pdp__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);clip-path:inset(0 0 100% 0);
  transition:transform 1.6s var(--ease),clip-path 1.2s var(--ease)}
.pdp__fig.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.pdp__fig:nth-child(2) img{transition-delay:.12s}
/* the first photo is the page's largest image: it paints the moment it arrives and settles in by itself, with no
   script to wait for (SEO audit 24 Oct: the reveal held it 4.2 s); the photos after it keep the scroll reveal */
.pdp__fig:first-child img{clip-path:inset(0 0 0 0);transform:scale(1);animation:pdpFirst 1.1s var(--ease) both}
@keyframes pdpFirst{from{clip-path:inset(0 0 14% 0);transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.pdp__fig img{clip-path:none;transform:none;transition:none}.pdp__fig:first-child img{animation:none}}
.pdp__info{position:sticky;top:96px;display:grid;gap:22px}
.pdp__kick{display:flex;gap:12px;flex-wrap:wrap}
.pdp__kick .is-new{color:var(--accent)}
.pdp__t{font-family:var(--ff-s);font-weight:500;font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.pdp__price{font-family:var(--ff-m);font-size:18px;color:var(--accent);display:flex;gap:12px;align-items:baseline}
.pdp__price s{color:var(--dim);font-size:15px}
.pdp__colours{display:grid;gap:9px;min-width:0}
/* the colour's own name sits in the heading, never squeezed under a 44 px thumb; a pointer over another thumb names that one */
.pdp__colourhead{color:var(--dim);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pdp__colourval{font-family:var(--ff-s);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);transition:opacity .18s var(--ease)}
.pdp__colourval.is-peek{color:var(--dim)}
.pdp__colourlist{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 3px 6px;scroll-snap-type:x proximity}
.pdp__colourlist::-webkit-scrollbar{display:none}
.pdp__colour{position:relative;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;scroll-snap-align:center;transition:transform .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.pdp__colour img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--bg-2)}
.pdp__colour.is-current{border:2px solid var(--accent);padding:2px}
.pdp__colour.is-oos{opacity:.48}
.pdp__colour.is-oos::after{content:"";position:absolute;left:2px;top:50%;width:calc(100% - 4px);height:1px;background:var(--ink);transform:rotate(-45deg);pointer-events:none}
.pdp__colour:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.pdp__colour:hover{transform:scale(1.06);border-color:var(--accent)}}
.pdp__colour:active{transform:scale(.96);transition-duration:.12s}
.pdp__save{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pdp__short{font-family:var(--ff-s);font-size:17px;line-height:1.6;max-width:44ch;color:var(--ink)}
.pdp__short p{margin:0 0 10px}
/* the buying column (Sindri, 24 Oct): one pompom control, one button that says what happens next */
.pdp__add{display:grid;gap:14px;padding-top:4px}
.pdp__add .sz{width:100%;text-align:center;justify-content:center;padding:16px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);transition:background .3s var(--ease),color .3s var(--ease),transform .16s var(--ease)}
@media(hover:hover){.pdp__add .sz:hover{background:var(--accent);border-color:var(--accent)}}
.pdp__add .sz:active{transform:scale(.99)}
.pdp__add .sz:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pdp__add .pdp__cta{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 22px;overflow:hidden}
.pdp__ctal{display:inline-block;will-change:transform}
.pdp__ar{flex:0 0 auto;transition:transform .25s var(--ease)}
@media(hover:hover) and (pointer:fine){.pdp__cta:hover .pdp__ar{transform:translateX(4px)}}
.pdp__oos{display:grid;gap:8px;padding:16px 18px;border:1px solid var(--line);background:var(--bg-2)}
.pdp__oos a{color:var(--accent)}
.pdp__pom{display:grid;gap:10px}
.pseg.pdp__swapseg{grid-template-columns:repeat(2,minmax(0,1fr))}   /* two choices, not the three of None/One/Two (.pseg comes later) */
.pdp__swapseg .pseg__o{min-height:48px;padding:6px;white-space:normal;line-height:1.4}
.pdp__swapseg .pseg__o.is-selected{color:var(--ink)}
.pdp__swap .pseg.pdp__swapseg .pseg__ind{width:calc((100% - 6px) / 2);opacity:1;transform:none;transition:transform .28s cubic-bezier(.23,1,.32,1)}
.pdp__swap .pseg.pdp__swapseg:has([data-swap="change"].is-selected) .pseg__ind{transform:translateX(100%)}
.pdp__swapseg .pseg__o:active{transform:scale(.96);transition:transform .12s var(--ease)}
.pdp__swapseg .pseg__o:not(:active){transition:color .2s var(--ease),transform .12s var(--ease)}
.pdp__pomt{margin:0;color:var(--dim)}
.pseg__hint{margin-left:.45em;font-size:10px;letter-spacing:.04em;text-transform:none;transition:opacity .2s var(--ease)}
.pdp__pom:has(.pseg.is-set) .pseg__hint{opacity:0}
.pseg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border:1px solid var(--line);background:var(--bg)}
.pseg__ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);background:var(--bg-2);border:1px solid var(--ink);transform:translateX(0);transform-origin:center;transition:transform .28s cubic-bezier(.23,1,.32,1)}
.pseg__o{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 6px;background:none;border:0;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .2s var(--ease)}
.pseg__o[aria-checked="true"]{color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pseg__o:hover{color:var(--ink)}}
.pseg__o:focus-visible{outline:1px solid var(--accent);outline-offset:-6px}
.pseg:not(.is-set) .pseg__ind{opacity:0}
.pseg__o,.pdp__cta,.pdp-bar__b,.acc summary,.pdp__fig{touch-action:manipulation}
.pseg__dots{display:inline-flex;gap:3px}
.pseg__dots i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pseg__dots i.o{background:none;border:1px solid currentColor}
.pseg__o{transition:color .2s var(--ease),transform .12s var(--ease)}
.pseg__o:active{transform:scale(.96)}
.pdp__promise{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.pdp__promise li{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pdp__promise .ic{color:var(--ink)}
/* the details, in sections that ease open and shut (pages.js) */
.pdp__accs{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;gap:14px;padding:17px 0;cursor:pointer;font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary>span{flex:1}
.acc summary .ic{flex:0 0 auto;color:var(--dim);transition:color .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.acc summary:hover .ic{color:var(--accent)}}
.acc summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.acc__pm{position:relative;flex:0 0 auto;width:11px;height:11px}
.acc__pm::before,.acc__pm::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .3s var(--ease)}
.acc__pm::after{transform:rotate(90deg)}
.acc[open]:not(.closing) .acc__pm::after{transform:rotate(0deg)}
.acc__b{overflow:hidden}
.acc__in{padding:0 0 22px 32px;font-size:14px;line-height:1.65}
.acc__in p{margin:0}
.pdp__facts{display:grid;grid-template-columns:110px 1fr;gap:9px 18px;font-size:13px;line-height:1.55;margin:0}
.pdp__facts dt{font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.pdp__facts dd{margin:0}
.pdp__goes{display:flex;flex-wrap:wrap;gap:6px 18px}
.pdp__goes a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
@media(hover:hover){.pdp__goes a:hover{color:var(--accent);text-decoration-color:var(--accent)}}
.pdp__body{font-family:var(--ff-s);font-size:16px;line-height:1.65;color:var(--ink);max-width:52ch}
.pdp__body p,.pdp__body ul,.acc__in>p{margin:0 0 .85em}
.pdp__body ul,.pdp__body ol,.pdp__short ul{list-style:none;padding:0;margin:.85em 0}
.pdp__body li,.pdp__short li{position:relative;padding-left:16px;margin:0 0 6px}
.pdp__body li::before,.pdp__short li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
:is(.pdp__body,.pdp__short) .pdp__video{display:flex;width:max-content;max-width:100%;align-items:center;gap:9px;margin-top:.35em;font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;color:var(--accent);text-decoration:none;background:linear-gradient(currentColor,currentColor) 35px 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.pdp__video::before{content:"\25B6\FE0E";display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--accent);border-radius:50%;font-size:9px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){:is(.pdp__body,.pdp__short) .pdp__video:hover{background-size:calc(100% - 35px) 1px}:is(.pdp__body,.pdp__short) .pdp__video:hover::before{background:var(--accent);color:var(--bg)}}
.pdp__video:active::before{transform:scale(.97)}
.pdp__body strong,.pdp__body b{font-weight:600}
/* photos: a tap shows them full size */
.pdp__fig{cursor:zoom-in}
.pdp__fig:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.pdp__dots{display:none}
.pzoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink);opacity:0;transition:opacity .18s var(--ease)}
.pzoom.on{opacity:1;transition-duration:.3s}
.pzoom::backdrop{background:transparent}
.pzoom:focus,.pzoom:focus-visible{outline:none}
.pzoom__in{height:100%;overflow:auto;overscroll-behavior:contain;display:grid;gap:12px;justify-items:center;align-content:start;padding:clamp(60px,9vh,84px) var(--pad) 48px;cursor:zoom-out}
.pzoom__in img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 140px);object-fit:contain;background:var(--bg-2);cursor:default;opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.pzoom.on .pzoom__in img{opacity:1;transform:none}
.pzoom__x{position:fixed;top:14px;right:var(--pad);z-index:2;display:inline-flex;align-items:center;gap:9px;padding:12px 0 12px 14px;background:var(--bg);border:0;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:color .3s var(--ease)}
.pzoom__x svg{transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.pzoom__x:hover{color:var(--accent)}.pzoom__x:hover svg{transform:rotate(90deg)}}
.pzoom__x:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
/* the phone buy bar: slides up once the button has scrolled away */
.pdp-bar{display:none}
@media(max-width:820px){
  .pdp__dots{display:flex;gap:4px;margin-top:-14px}
  .pdp__dots i{flex:1;height:2px;background:var(--line);transition:background-color .25s var(--ease)}
  .pdp__dots i.on{background:var(--ink)}
  .pdp-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:14px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(247,243,239,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
  .pdp-bar.on{transform:none;transition-duration:.42s}
  .pdp-bar__t{flex:1;min-width:0;display:grid;gap:2px}
  .pdp-bar__n{font-family:var(--ff-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp-bar__p{font-family:var(--ff-m);font-size:12px;color:var(--accent)}
  .pdp-bar__b{flex:0 0 auto;height:46px;padding:0 18px;background:var(--ink);color:var(--bg);border:0;font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;cursor:pointer}
  .pdp-bar__b span{display:inline-block}
}
@media(prefers-reduced-motion:reduce){.pseg__ind,.pseg__hint,.pdp-bar,.pzoom,.pzoom__in img,.pg__empty .link,:is(.pdp__body,.pdp__short) .pdp__video,.pdp__video::before,.pdp__colour{transition:none}.pzoom__in img{opacity:1;transform:none}}
@media(max-width:900px){
  .pdp__grid{grid-template-columns:1fr;gap:28px}
  .pdp__info{position:static}
  .pdp__gal.two{grid-template-columns:1fr}
  .pdp__gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
  .pdp__gal::-webkit-scrollbar{display:none}
  .pdp__fig{flex:0 0 100%;scroll-snap-align:center}
  .pdp__fig:only-child{flex-basis:100%}   /* one photo fills the width; several leave the next one peeking */
}

/* ── fibres ──────────────────────────────────────────────────── */
.fib{padding:0 var(--pad)}
.fib__ch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--line)}
.fib__ch:first-child{border-top:0;padding-top:0}
.fib__im{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);position:relative}
.fib__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fib__ch:hover .fib__im img{transform:scale(1.03)}
.fib__im .head__n{position:absolute;top:14px;left:16px;z-index:2;background:var(--bg);padding:4px 8px}
.fib__body{display:grid;gap:18px;align-content:start;position:sticky;top:96px}
.fib__name{font-family:var(--ff-d);font-weight:600;font-size:clamp(46px,7vw,110px);line-height:.95;text-transform:uppercase;letter-spacing:.015em}
/* her longer names ("Smooth angora and merino wool") a step down, so they hold three lines, not five */
.fib__name--long{font-size:clamp(38px,5vw,76px)}
.fib__lead{font-family:var(--ff-s);font-size:clamp(19px,2.1vw,27px);line-height:1.25;text-wrap:balance;max-width:26ch}
.fib__p{font-size:14px;line-height:1.7;max-width:50ch}
.fib__q{font-size:14px;line-height:1.7;max-width:50ch;color:var(--dim);border-left:1px solid var(--accent);padding-left:14px}
.fib__q b{font-weight:400;color:var(--ink)}
.fib__meta{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
/* her designs in this material, as links into the shop */
.fib__des{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13px;line-height:1.5;max-width:56ch}
.fib__des .mono{width:100%;color:var(--dim)}
.fib__des a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
@media(hover:hover){.fib__des a:hover{text-decoration-color:var(--ink)}}
.pdp__facts dd a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
@media(hover:hover){.pdp__facts dd a:hover{text-decoration-color:var(--ink)}}
.filt__row--fam[hidden]{display:none}
.filt__active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 var(--pad) 18px;min-width:0;}
.filt__active[hidden]{display:none}
#shopCount{white-space:normal}
.filt__tag,.filt__clear,.filt__show-oos{min-height:40px;padding:8px 12px;border:1px solid var(--line);background:transparent;color:var(--ink);font:10px var(--ff-m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;overflow-wrap:anywhere;animation:filtChipIn .28s var(--ease) both;transition:transform .18s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
@keyframes filtChipIn{from{opacity:0;transform:translateY(5px)}}
.filt__tag span{color:var(--accent);font-size:15px}
.filt__clear,.filt__show-oos{color:var(--accent);border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.filt__tag:active,.filt__clear:active,.filt__show-oos:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.filt__tag,.filt__clear,.filt__show-oos{animation:none;transition:none}}
/* phones: her groups, designs and materials are one sideways line each, so the pieces start on
   the first screen instead of three screens down; the cut-off chip at the edge says there is more */
@media(max-width:640px){
  /* the filter grid's one column must not grow to the unwrapped rows' width */
  .filt{grid-template-columns:minmax(0,1fr)}
  .filt__row{min-width:0}
  #fType,#fFam,#fFibre,#fCol{width:100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-right:calc(-1 * var(--pad));padding-right:var(--pad);padding-bottom:2px}
  #fType::-webkit-scrollbar,#fFam::-webkit-scrollbar,#fFibre::-webkit-scrollbar,#fCol::-webkit-scrollbar{display:none}
  #fType .chip,#fFam .chip,#fFibre .chip,#fCol .chip{flex:none}
  #fCol{padding:5px 0 5px 5px;margin-left:-5px}
}
.fib__mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.fib__mini .prod{width:auto}
.fib__mini .prod__sizes{display:none}
.fib__mini .prod__meta{margin-top:10px;padding-top:10px}
.fib__mini .prod__name{font-size:10.5px}
@media(max-width:900px){.fib__ch{grid-template-columns:1fr}.fib__body{position:static}}
@media(max-width:640px){.fib__mini{grid-template-columns:repeat(2,minmax(0,1fr))}.fib__mini .prod:nth-child(3){display:none}}

/* ── stores page ─────────────────────────────────────────────── */
.stp .stores__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stp .store{--sp:clamp(22px,3vw,40px);padding:var(--sp);scroll-margin-top:88px}
.stp .store__ph{aspect-ratio:3/2}
.stp .store__name{font-size:clamp(26px,3vw,44px)}
.stp .store.is-here{border-color:var(--accent)}
.store__facts{display:grid;grid-template-columns:96px 1fr;gap:8px 16px;font-size:13px;line-height:1.55;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.store__facts dt{font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.store__facts dd{margin:0}
.await{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;gap:8px;align-items:center}
.await::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8}
.stp .store__map iframe{height:260px}
@media(max-width:760px){.stp .stores__grid{grid-template-columns:1fr}.stp .store__ph{aspect-ratio:4/3}}

/* ── story ───────────────────────────────────────────────────── */
.story{padding:0 var(--pad)}
.story__lead{font-family:var(--ff-s);font-weight:500;font-size:clamp(26px,3.6vw,54px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;max-width:22ch}
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,100px);margin-top:clamp(40px,6vw,90px);align-items:start}
.story__col{display:grid;gap:22px;font-size:14.5px;line-height:1.75;max-width:54ch}
.story__col h3{font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:400;margin-top:14px}
.story__im{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);position:sticky;top:96px}
.story__im img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.story__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(50px,8vw,120px);border-top:1px solid var(--line);padding-top:26px}
/* one line, also for the Icelandic units ("2 klst.", "20 mín." wrapped onto two lines at 92px) */
.story__facts b{display:block;font-family:var(--ff-d);font-weight:600;font-size:clamp(40px,5vw,80px);line-height:.9;text-transform:uppercase;letter-spacing:.015em;white-space:nowrap}
.story__facts span{display:block;margin-top:8px}
/* the figure big, the unit a small word beside it: "2h" read as letters to visitors from other countries (Anna, 23 Oct) */
.story__facts b small{font-family:var(--ff-m);font-weight:400;font-size:12px;letter-spacing:.1em;margin-left:.45em;vertical-align:baseline}
/* Anna's story (2026-10-10): the company beside the team at the machines (square, so all seven fit),
   then the designer beside her portrait, mirrored, signed in her words */
.story__im--sq{aspect-ratio:1}
.story__im img[width]{object-position:50% 50%}
.story__grid--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.story__grid--flip .story__im{order:2}
.story__sign{font-family:var(--ff-s);font-size:clamp(18px,1.6vw,22px);line-height:1.45;margin-top:6px}
.story__team{margin-top:clamp(50px,8vw,120px)}
.story__team h3{font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:400}
.story__team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);margin-top:20px}
.story__team-grid figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.story__team-grid img{width:100%;height:100%;object-fit:cover;display:block}
.story__sign .mono{display:block;margin-top:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media(max-width:900px){.story__grid{grid-template-columns:1fr}.story__team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story__im{position:static;max-width:520px}.story__facts{grid-template-columns:repeat(2,minmax(0,1fr))}.story__facts b{font-size:clamp(30px,10.5vw,56px)}.story__grid--flip{grid-template-columns:1fr}.story__grid--flip .story__im{order:0}}

/* ── staff: mark sold out in two taps ────────────────────────── */
.stf{padding:0 var(--pad)}
.stf__bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:66px;background:var(--bg);z-index:5}
.stf__bar .filt__q{flex:1;min-width:220px;border:0;padding:0}
.stf__bar .filt__q input{font-size:16px}
.stf__note{max-width:64ch;font-size:13px;line-height:1.65;color:var(--dim);margin:18px 0 8px}
.stf__list{display:grid;border-top:1px solid var(--line);margin-top:22px}
.stf__row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.stf__row img{width:56px;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}
.stf__nm{font-family:var(--ff-m);font-size:12px;text-transform:uppercase;letter-spacing:.03em;line-height:1.35;min-width:0}
.stf__nm small{display:block;font-size:10px;color:var(--dim);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.stf__row.is-oos{background:var(--bg-2)}
.stf__row.is-oos .stf__nm{color:var(--dim)}
.stf__row.is-oos img{opacity:.5;filter:saturate(.6)}
.stf__btn{font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;min-height:44px;
  border:1px solid var(--line);color:var(--ink);background:transparent;white-space:nowrap;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),transform .14s var(--ease)}
.stf__btn:active{transform:scale(.97)}
.stf__btn.is-arm{background:var(--accent);color:#fff;border-color:var(--accent)}
.stf__row.is-oos .stf__btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stf__more{display:flex;justify-content:center;padding:30px 0 0}
.stf__toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:150;pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;
  transition:opacity .35s var(--ease),transform .5s var(--ease)}
.stf__toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){.stf__row{grid-template-columns:44px 1fr auto}.stf__row img{width:44px}}

/* ── shop: every piece as a plain link (tools/build-products.mjs), so the whole catalogue is in the
      HTML for crawlers that run no script; closed until asked for ── */
.idx{margin:clamp(48px,7vw,96px) var(--pad) 0;border-top:1px solid var(--line)}
.idx__s{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;min-height:44px}
.idx__s::-webkit-details-marker{display:none}
.idx__s:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.idx__s::after{content:"+";font-family:var(--ff-m);font-size:16px;line-height:1;color:var(--dim);transition:transform .3s var(--ease)}
.idx[open] .idx__s::after{transform:rotate(45deg)}
.idx__s:hover .mono:first-child{color:var(--accent)}
.idx__n{color:var(--dim);margin-left:auto}
.idx__g{padding:8px 0 28px}
.idx__g h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.idx__g h3 small{color:var(--dim);font-size:inherit;margin-left:6px}
.idx ul{list-style:none;margin:0;padding:0;columns:3 260px;column-gap:clamp(20px,3vw,48px)}
.idx li{break-inside:avoid;padding:5px 0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.idx li a{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.idx li a:hover{background-size:100% 1px;color:var(--accent)}
.idx li.oos a{color:var(--dim)}
.idx li small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-left:4px}

/* ── page changes ───────────────────────────────────────────────
   Between inner pages (this file is on every one of them, and not on the home page with its
   preloader) the old page and the new one cross-fade: opacity only, 200 ms, ease-out, the same curve
   both ways so the two always add up to one. Skipped on Back, Forward and reload (head script on each
   page) and with reduced motion. Browsers without cross-document view transitions just cut, as before. */
/* (moved to styles.css 2026-10-09 so the home page takes part too) */

/* iOS Safari zooms the page when an input under 16px gets focus: touch devices get 16px in the shop's search and sort */
@media (pointer:coarse){.filt__q input,.sel select{font-size:16px}.filt__q{min-width:min(100%,300px)}}

/* ── nothing jumps while the page fills in ──────────────────────
   The shop's chips, its grid and the materials chapters are built by script after the page has drawn,
   which pushed everything below them (and the footer) down: layout shift 0.49 on the shop, 0.56 on the
   materials page. The space is kept until the script has filled them (data-wait, removed by pages.js). */
#fType,#fFibre{min-height:37px}
.pgrid[data-wait]{min-height:120vh}
.fib[data-wait]{min-height:150vh}

/* Variable choices can have any number of options; a selected radio stays visible (1 Nov). */
.pdp__var .pseg__o.is-selected{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ink)}
.pdp__var .pseg__o:disabled{opacity:.5;cursor:not-allowed}
/* long or many options: four to a row, a long name breaks inside its box (swarm 1 Nov, 8 options at 375 px) */
.pdp__var .pseg__o{height:auto;min-height:48px;white-space:normal;overflow-wrap:break-word;hyphens:auto;line-height:1.25;padding:.6em 6px;text-align:center}
.pdp__var .pseg__ind{display:none}
/* "Add to bag" waits for a choice: dimmed, not struck through like a sold-out size; long option names keep inside their box */
.pdp__cta:disabled{text-decoration:none;opacity:.45}
.pdp__var .pseg__o{letter-spacing:.04em}
/* her own size charts and numbered lists, as she wrote them (swarm 1 Nov) */
.pdp__body table,.pdp__short table,.pdp__vdesc table{border-collapse:collapse;margin:.6em 0 1em;font-size:.92em}
.pdp__body :is(td,th),.pdp__short :is(td,th),.pdp__vdesc :is(td,th){padding:.35em .9em .35em 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pdp__body ol,.pdp__short ol,.pdp__vdesc ol{list-style:decimal;padding-left:1.4em}
.pdp__body table+p,.pdp__vdesc table+p{margin-top:.8em}
.pdp__body ol>li::before,.pdp__short ol>li::before,.pdp__vdesc ol>li::before{content:none}
.pdp__body ol>li,.pdp__short ol>li,.pdp__vdesc ol>li{list-style:decimal}
.pdp__body table,.pdp__short table,.pdp__vdesc table{display:block;max-width:100%;overflow-x:auto}
/* a wide size chart scrolls inside its own box at phone width; it never widens the page (swarm 2 Nov) */
.acc__b,.acc__in,.pdp__body,.pdp__short,.pdp__vdesc{min-width:0;max-width:100%}
.pdp__body :is(td,th),.pdp__short :is(td,th),.pdp__vdesc :is(td,th){overflow-wrap:anywhere}
/* the buying column never grows to fit her widest content (a size chart, a 90-letter word): the column stays the column (swarm 2 Nov) */
.pdp__grid>*,.pdp__info>*{min-width:0}
.pdp__info{grid-template-columns:minmax(0,1fr)}
.pdp__short,.pdp__body,.pdp__vdesc,.acc__in{overflow-wrap:anywhere}
/* a size chart keeps its cells on one line and scrolls sideways inside its own box; letters never stack one per line (swarm 2 Nov) */
.pdp__body :is(td,th),.pdp__short :is(td,th),.pdp__vdesc :is(td,th){white-space:nowrap;overflow-wrap:normal;word-break:normal}
.pdp__body table,.pdp__short table,.pdp__vdesc table{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* Real-product lining options retain native link navigation, including without JavaScript. */
.pdp__lining{margin:20px 0}
.pdp__lining .pseg{grid-template-columns:repeat(2,minmax(0,1fr))}
.pdp__lining .pseg__o{height:auto;min-height:48px;padding:10px 6px;white-space:normal;text-align:center;line-height:1.4;text-decoration:none}
.pdp__lining .pseg__o.is-selected{color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ink)}
.pdp__lining .pseg__o:disabled{opacity:.5;cursor:not-allowed}

/* phone search row (8 Nov): the whole row, and the hint small enough to be read to its end */
@media(max-width:700px){.filt__q{flex:1 1 100%;width:100%;min-width:0}.filt__q input{min-width:0;width:100%}.filt__q input::placeholder{font-size:12.5px;letter-spacing:0}}