/* The template for the pages that are not the collection (the retailers look, approved by Ingmar on
   21 October 2026; parts in tools/previews/kit.js): big headings and few lines, in the site's light theme
   (assets/parts.css, docs/merk.md); a product stands on its bone card and the closing call is a dark
   island. Movement only starts when a part comes into view; without JavaScript, or with reduced motion,
   everything simply stands. */
.r-h2{font-size:clamp(40px,6.4vw,104px);font-weight:300;letter-spacing:-.055em;line-height:.92;max-width:14ch}
.r-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
@media (max-width:860px){.r-head{grid-template-columns:1fr}}

/* hero: the title rises word by word, the photo opens from below */
.r-hero{padding-top:clamp(116px,13vw,176px);padding-bottom:clamp(40px,5vw,72px)}
.r-hero h1{font-size:clamp(46px,8.2vw,152px);font-weight:300;letter-spacing:-.06em;line-height:.88;max-width:15ch}
.r-hero h1 .w{display:inline-block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em;vertical-align:top}
.r-hero h1 .w > span{display:inline-block;animation:rise 1s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--d) * 80ms + 120ms)}
@keyframes rise{from{transform:translateY(130%)}to{transform:none}}
.r-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,88px);align-items:start;margin-top:clamp(36px,5vw,72px)}
.r-hero .lead{font-size:clamp(19px,1.6vw,24px);max-width:34ch}
.r-hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.r-hero-img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;animation:open 1.3s cubic-bezier(.2,.75,.15,1) .45s both}
.r-hero-img img{width:100%;height:100%;object-fit:cover;transform:translateY(var(--py,0)) scale(1.12);will-change:transform}
@keyframes open{from{clip-path:inset(100% 0 0 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
/* retailers: the shop photo is the hero, beside the headline on a wide screen and under it on a phone.
   The frame is the picture's own shape, with no zoom, so the animals and the crate stay whole. */
.r-hero--shop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(28px,4vw,72px);align-items:start}
.r-hero--shop .r-hero-copy{min-width:0}
.r-hero--shop .lead{margin-top:clamp(16px,2vw,28px)}
.r-hero-img.shop{aspect-ratio:1532/1027;width:100%;margin:0;align-self:start}
.r-hero-img.shop img{object-fit:cover;object-position:center 36%;transform:none}
@media (max-width:860px){
  .r-hero-row{grid-template-columns:1fr}
  .r-hero--shop{grid-template-columns:1fr;row-gap:18px}
  .r-hero--shop .r-hero-copy{display:contents}
  .r-hero--shop h1{order:1}
  .r-hero--shop .r-hero-img.shop{order:2}
  .r-hero--shop .lead{order:3}
  .r-hero--shop .lead-2{order:4}
  .r-hero--shop .acts{order:5}
}
@media (max-width:600px){.r-hero h1{font-size:12.6vw}}

/* the terms, big */
.r-terms{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.r-terms > div{padding:clamp(24px,3vw,44px) clamp(12px,2vw,28px) clamp(24px,3vw,44px) 0;border-right:1px solid var(--line);min-width:0}
.r-terms > div + div{padding-left:clamp(12px,2vw,28px)}
.r-terms > div:last-child{border-right:0}
.r-terms--std{grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr)}
.r-terms b{display:block;font:300 clamp(34px,4.2vw,76px)/1 var(--sans);letter-spacing:-.05em;white-space:nowrap}
.r-terms span:not([data-count]){display:block;margin-top:12px;color:var(--ash);font-size:15px}
@media (max-width:860px){.r-terms{grid-template-columns:1fr 1fr}.r-terms > div:nth-child(2){border-right:0}.r-terms > div:nth-child(3){padding-left:0}.r-terms > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:560px){
  .r-terms{grid-template-columns:1fr}
  .r-terms > div,.r-terms > div + div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:baseline;gap:12px;padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .r-terms > div:last-child{border-bottom:0}
  .r-terms b{font-size:clamp(28px,8.4vw,40px)}
  .r-terms span:not([data-count]){margin-top:0;font-size:14px}
}

/* shipped to: one country at a time, flipping letter by letter, and the list to pick from */
.r-ship{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(48px,6vw,88px);border-bottom:1px solid var(--line)}
.r-ship-top{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,4vw,64px);align-items:end}
.r-ship h2{font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.15;max-width:14ch}
.r-ship .ship-now{font:300 clamp(48px,8.4vw,150px)/.95 var(--sans);letter-spacing:-.06em;text-align:right;white-space:nowrap;overflow:hidden;padding-bottom:.08em;perspective:600px}
.flap{display:inline-block}
.flap i{display:inline-block;font-style:normal;white-space:pre}
.flap i.go{animation:flick .5s cubic-bezier(.2,.75,.15,1) both}
@keyframes flick{0%{transform:translateY(-.3em) rotateX(80deg);opacity:0}100%{transform:none;opacity:1}}
.r-ship-list{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--line)}
.r-ship-list li{min-width:0}
.r-ship-list button{width:100%;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:14px 10px 14px 0;border:0;border-top:2px solid transparent;margin-top:-1px;background:none;color:var(--ash);font:400 14px/1.2 var(--sans);text-align:left;cursor:pointer;transition:color .25s,border-color .25s}
.r-ship-list button b{font:500 13px/1 var(--mono);letter-spacing:.06em}
.r-ship-list button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.r-ship-list button:hover{color:var(--bone)}
.r-ship-list button[aria-pressed="true"]{color:var(--bone);border-top-color:var(--bone)}
.r-ship-cap{margin-top:18px;color:var(--ash);font-size:15px}
@media (max-width:999px){.r-ship-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.r-ship-top{grid-template-columns:1fr}.r-ship .ship-now{text-align:left}}
@media (max-width:560px){.r-ship-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.r-ship .ship-now{font-size:12.4vw}.r-ship-list button{min-height:60px}}

/* the shop types: the photo stays in place while the types scroll past it */
.r-shops{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(40px,6vw,96px)}
.r-shops .r-head{margin-bottom:clamp(40px,6vw,96px)}
.r-intro{font-size:clamp(18px,1.5vw,22px);color:var(--ash);max-width:34ch}
.scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:start}
.pin{position:sticky;top:calc(72px + max(24px,(100vh - 72px - min(70vh,620px)) / 2))}
.frame{position:relative;aspect-ratio:4/5;max-height:min(70vh,620px);margin-inline:auto;border-radius:20px;overflow:hidden;background:#F2EEE6}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.75,.15,1)}
.frame img.prod{object-fit:contain;padding:9%;mix-blend-mode:multiply}
.frame img.on{opacity:1;transform:none}
.frame .count{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--bone);font:400 13px/1 var(--mono)}
.frame .count b{font-weight:500}
.types{list-style:none;margin:0;padding:0}
.types li{min-height:min(72vh,640px);display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,48px) 0;border-top:1px solid var(--line);transition:opacity .5s ease}
.types li:first-child{border-top:0}
.js .types li{opacity:.28}
.js .types li.on{opacity:1}
.types figure{display:none;margin:0 0 20px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#F2EEE6}
.types figure img{width:100%;height:100%;object-fit:cover}
.types figure.prod img{object-fit:contain;padding:7%;mix-blend-mode:multiply}
.types .no{font:300 clamp(18px,1.6vw,22px)/1 var(--mono);color:var(--ash)}
.types h3{margin-top:18px;font-size:clamp(34px,4.2vw,68px);font-weight:300;letter-spacing:-.05em;line-height:.95;max-width:13ch}
.types p{margin-top:18px;font-size:clamp(17px,1.35vw,20px);max-width:38ch;color:#2f2c27}
.types .more-btn{margin-top:26px;align-self:flex-start}
.types .more{margin-top:22px;align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:.4em;color:var(--bone);text-underline-offset:5px}
@media (max-width:860px){
  .scrolly{grid-template-columns:1fr}
  .pin{display:none}
  .types li{min-height:0;padding:28px 0}
  .js .types li{opacity:1}
  .types figure{display:block}
  .types h3{margin-top:12px}
}

/* gifts: the four sizes stand up on one shelf, on its bone card */
.r-ladder{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.6vw,24px);align-items:end;margin-top:clamp(40px,6vw,88px);padding:clamp(20px,3vw,40px) clamp(12px,2vw,32px) 0;background:#F2EEE6;border-radius:22px;color:#000}
.shelf figure{margin:0;min-width:0}
.shelf .pic{aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.shelf img{width:100%;transform-origin:50% 100%;transform:scale(var(--k));mix-blend-mode:multiply}
.shelf figcaption{display:flex;flex-direction:column;gap:2px;padding:14px 0 clamp(18px,2.4vw,28px);border-top:1px solid rgba(0,0,0,.18)}
.shelf figcaption b{font:300 clamp(24px,3vw,48px)/1 var(--sans);letter-spacing:-.04em}
.shelf figcaption span{font-size:clamp(12px,1.1vw,15px);color:#5f5a52;white-space:nowrap}
@media (max-width:600px){.shelf{gap:6px;padding:16px 10px 0}.shelf figcaption b{font-size:clamp(16px,4.6vw,24px)}.shelf figcaption span{font-size:11.5px}}
.extras{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,48px);margin-top:clamp(28px,3vw,40px)}
.extras p{display:flex;align-items:baseline;gap:12px}
.extras p b{font:300 clamp(28px,3vw,44px)/1 var(--sans);letter-spacing:-.04em}
.extras p span{color:var(--ash)}
.extras .btn{margin-left:auto}
@media (max-width:860px){.extras .btn{margin-left:0}}

/* what the minimum buys */
.r-mix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start;padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-mix > div:first-child p{margin-top:24px;font-size:clamp(18px,1.5vw,22px);max-width:40ch;color:#2f2c27}
.calc table{width:100%;border-collapse:collapse;font-size:clamp(16px,1.3vw,19px)}
.calc td{padding:14px 0;border-bottom:1px solid var(--line)}
.calc td:first-child{width:3.2ch;font-weight:500}
.calc td:nth-child(3){color:var(--ash)}
.calc td:nth-child(3),.calc td:nth-child(4){text-align:right;white-space:nowrap;padding-left:12px}
.calc tfoot td{border-bottom:0;padding-top:20px}
.calc tfoot b{font:300 clamp(36px,4vw,64px)/1 var(--sans);letter-spacing:-.05em}
.calc .bar{position:relative;height:10px;margin-top:22px;border-radius:999px;background:#E7E3DC}
.calc .bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--f) * 100%);border-radius:inherit;background:var(--bone);transform-origin:0 50%}
.calc .bar span{position:absolute;right:0;top:18px;font-size:14px;color:var(--ash)}
@media (max-width:860px){.r-mix{grid-template-columns:1fr}}

/* the first order in three steps: a line runs under them */
.r-steps{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-steps ol{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);position:relative}
.r-steps ol::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--bone);transform-origin:0 50%}
.r-steps li{padding-top:clamp(24px,3vw,40px);min-width:0}
.r-steps .no{display:block;font:300 clamp(80px,11vw,180px)/.8 var(--sans);letter-spacing:-.07em;color:var(--bone)}
.r-steps h3{margin-top:24px;font-size:clamp(26px,2.6vw,40px);font-weight:400;letter-spacing:-.04em}
.r-steps p{margin-top:12px;color:var(--ash);max-width:32ch}
@media (max-width:760px){.r-steps ol{grid-template-columns:1fr}.r-steps li + li{border-top:1px solid var(--line)}}

/* the end: black, one big line */
.r-end{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(72px,10vw,160px);background:#000;text-align:center}
.r-end h2{font-size:clamp(60px,13vw,240px);font-weight:300;letter-spacing:-.07em;line-height:.85}
.r-end .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,56px)}

/* movement, only with JavaScript and without reduced motion */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.75,.15,1),transform 1s cubic-bezier(.2,.75,.15,1)}
.js .rv.in{opacity:1;transform:none}
.js .shelf figure .pic img{transform:translateY(30%) scale(var(--k));opacity:0;transition:transform 1s cubic-bezier(.2,.75,.15,1),opacity .8s;transition-delay:calc(var(--d) * 120ms + 200ms)}
.js .shelf.in figure .pic img{transform:scale(var(--k));opacity:1}
.js .calc .bar i{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.75,.15,1) .3s}
.js .calc.in .bar i{transform:none}
.js .r-steps ol::before{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.75,.15,1)}
.js .r-steps ol.in::before{transform:none}
.js .r-steps ol li{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d) * 160ms + 300ms)}
.js .r-steps ol.in li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .r-hero h1 .w > span,.r-hero-img,.flap i.go{animation:none}
  .js .rv,.js .shelf figure .pic img,.js .calc .bar i,.js .r-steps ol::before,.js .r-steps ol li{opacity:1;transform:none;transition:none}
  .js .shelf figure .pic img{transform:scale(var(--k))}
  .frame img{transition:none}
  .js .types li{opacity:1}
}

/* a photo still to come, at its own place and size */
.r-todo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:18px;border:1.5px dashed var(--line);background:var(--soot);color:var(--ash);text-align:center;padding:16px}
.r-todo span{font-size:clamp(16px,1.4vw,20px);color:var(--bone)}
.r-todo small{font:400 13px/1 var(--mono)}

/* hero variants: a product on its bone card instead of a room */
.r-hero-img.prod{background:#F2EEE6;aspect-ratio:5/4}
.r-hero-img.prod img{object-fit:contain;padding:6%;mix-blend-mode:multiply;transform:translateY(var(--py,0))}

/* hero "stage": the product first, the words beside it */
.r-hero--stage .r-hero-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.r-hero--stage .r-hero-img{order:-1}
@media (max-width:860px){.r-hero--stage .r-hero-row{grid-template-columns:1fr}.r-hero--stage .r-hero-img{order:0}}

/* the colours of a collection: a photo per colour on its card, or the shade itself */
.r-colours{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(40px,6vw,96px)}
.cgroup{margin-top:clamp(36px,5vw,72px)}
.cgroup h3{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;margin-bottom:18px}
.cgroup ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:clamp(10px,1.4vw,20px)}
.cgroup li{min-width:0}
.sw-pic{aspect-ratio:1;border-radius:16px;background:#F2EEE6;overflow:hidden;display:grid;place-items:center}
.sw-pic img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.cgroup li:hover .sw-pic img{transform:scale(1.05)}
.sw-pic,.cpanels .pn-pic{position:relative}.cpanels .pn-pic{position:absolute}
.sw-pic img.alt,.pn-pic img.alt{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
@media (hover:hover){li:hover > .sw-pic:has(img.alt) img:not(.alt),li:hover > .pn-pic:has(img.alt) img:not(.alt){opacity:0}li:hover > .sw-pic img.alt,li:hover > .pn-pic img.alt{opacity:1}}
.sw-pic > i{width:58%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cgroup li > span{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15px}
.cgroup li > span i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* sizes: the shelf takes as many places as there are sizes */
.shelf{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.r-ladder .r-head + .shelf{margin-top:clamp(40px,6vw,88px)}

/* prices against the three tiers */
.r-prices{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.ptable{margin-top:clamp(32px,4vw,56px);overflow-x:auto}
.ptable table{width:100%;border-collapse:collapse;min-width:520px}
.ptable th,.ptable td{padding:18px 12px 18px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.ptable thead th{font-size:14px;color:var(--ash);padding-top:0}
.ptable tbody th{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em}
.ptable tbody th span{display:block;margin-top:4px;font-size:13px;color:var(--ash);letter-spacing:0}
.ptable td{font:300 clamp(24px,2.6vw,40px)/1 var(--sans);letter-spacing:-.04em;white-space:nowrap}

/* a short story beside a close-up */
.r-story{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(24px,4vw,72px);align-items:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.r-story figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;max-height:260px}
.r-story figure img{width:100%;height:100%;object-fit:cover}
.r-story p{margin-top:24px;font-size:clamp(18px,1.6vw,24px);max-width:34ch}
@media (max-width:860px){.r-story{grid-template-columns:1fr}}

/* other collections to mix in */
.r-more{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-more ul{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.r-more a{display:flex;flex-direction:column;gap:4px;color:var(--bone);text-decoration:none}
.r-more .pic{aspect-ratio:1;border-radius:18px;background:#F2EEE6;overflow:hidden;margin-bottom:12px}
.r-more .pic img{width:100%;height:100%;object-fit:contain;padding:10%;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.r-more a:hover .pic img{transform:scale(1.05)}
.r-more b{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em}
.r-more span{color:var(--ash)}
@media (max-width:700px){.r-more ul{grid-template-columns:1fr 1fr}.r-more li:nth-child(3){display:none}}

/* a frame slide that is not a photo: a big figure on the bone card (order steps, chapters) */
.frame .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(24px,3vw,44px);color:#0B0B0A;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.75,.15,1)}
.frame .slide.on{opacity:1;transform:none}
.frame .slide b{font:300 clamp(72px,9vw,160px)/.85 var(--sans);letter-spacing:-.07em}
.frame .slide span{font-size:clamp(16px,1.3vw,19px);color:#5f5a52;max-width:24ch}
.frame .slide .meter{height:10px;border-radius:999px;background:rgba(0,0,0,.1);overflow:hidden}
.frame .slide .meter i{display:block;height:100%;width:calc(var(--f) * 100%);background:#0B0B0A;border-radius:inherit;transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.75,.15,1) .2s;transform:scaleX(0)}
.frame .slide.on .meter i{transform:none}
.scrolly.flow .types li{min-height:min(60vh,520px)}
@media (max-width:860px){.scrolly.flow .types li{min-height:0}}

/* three tiers as three steps up */
.r-tiers{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.steps3{list-style:none;margin:clamp(40px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,24px);align-items:end}
.steps3 li{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:calc(var(--h) * clamp(220px,30vw,420px));padding:clamp(18px,2.4vw,32px);border-radius:20px;background:#F2EEE6;color:#0B0B0A}
.steps3 li:last-child{background:#0B0B0A;color:#F2EEE6}
.steps3 span{font-size:15px;opacity:.7}
.steps3 b{font:300 clamp(36px,5vw,84px)/.9 var(--sans);letter-spacing:-.06em}
.steps3 small{font-size:13px;opacity:.6}
.steps3 .save{align-self:flex-start;margin:0 0 4px}
.steps3 li:last-child .save{background:rgba(134,212,159,.14);color:#86D49F}
.js .steps3 li{transform:translateY(30px);opacity:0;transition:transform .9s cubic-bezier(.2,.75,.15,1),opacity .7s;transition-delay:calc(var(--d) * 140ms + 150ms)}
.js .steps3.in li{transform:none;opacity:1}
@media (max-width:600px){.steps3{grid-template-columns:1fr}.steps3 li{min-height:0}}

/* two side by side: labels, ways to ship */
.r-two{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:clamp(36px,5vw,72px)}
.two h3{margin-top:22px;font-size:clamp(26px,2.6vw,40px);font-weight:400;letter-spacing:-.04em}
.two .big{display:block;margin-top:6px;font:300 clamp(40px,5vw,80px)/1 var(--sans);letter-spacing:-.06em}
.two p{margin-top:14px;font-size:clamp(17px,1.35vw,20px);max-width:38ch;color:var(--ash)}
.two.plain > div{padding-top:24px;border-top:2px solid var(--bone)}
.two.plain h3{margin-top:0}
.r-note{margin-top:clamp(36px,5vw,64px);max-width:60ch;font-size:clamp(16px,1.2vw,18px);color:var(--ash)}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* how many fit in one box, per size */
.r-box{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.perbox{list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.perbox li{padding:clamp(20px,3vw,40px) 12px 0 0;border-right:1px solid var(--line);min-width:0}
.perbox li + li{padding-left:clamp(12px,2vw,28px)}
.perbox li:last-child{border-right:0}
.perbox b{display:block;font:300 clamp(48px,7vw,120px)/.9 var(--sans);letter-spacing:-.07em}
.perbox span{display:block;margin-top:12px;color:var(--ash);font-size:15px}
@media (max-width:600px){.perbox{grid-template-columns:1fr 1fr}.perbox li:nth-child(2){border-right:0}.perbox li:nth-child(3){padding-left:0}.perbox li:nth-child(-n+2){padding-bottom:20px;border-bottom:1px solid var(--line)}}

/* export papers, one per row, big */
.r-docs{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.docs{list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--line)}
.docs li{display:grid;grid-template-columns:clamp(40px,6vw,96px) minmax(0,1fr) minmax(0,.6fr);align-items:baseline;gap:16px;padding:clamp(18px,2.6vw,36px) 0;border-bottom:1px solid var(--line)}
.docs .no{font:300 clamp(16px,1.4vw,20px)/1 var(--mono);color:var(--ash)}
.docs b{font:300 clamp(30px,4.6vw,76px)/1 var(--sans);letter-spacing:-.05em}
.docs li > span:last-child{color:var(--ash);text-align:right}
.js .docs li{opacity:0;transform:translateX(-24px);transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d) * 140ms + 150ms)}
.js .docs.in li{opacity:1;transform:none}
@media (max-width:700px){.docs li{grid-template-columns:36px minmax(0,1fr)}.docs li > span:last-child{grid-column:2;text-align:left}}

/* the workshop opening: the name, very big, and what it means */
.r-name{padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(48px,6vw,96px)}
.r-name .giant{font:500 clamp(120px,30vw,520px)/.8 var(--sans);letter-spacing:-.08em;margin-left:-.04em}
.r-name .giant .w{display:inline-block;overflow:hidden;padding-bottom:.1em;vertical-align:top}
.r-name .giant .w > span{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.75,.15,1) both .1s}
.r-name-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:start;margin-top:clamp(28px,4vw,56px)}
.r-name h1{font-size:clamp(30px,3.6vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1;max-width:16ch}
.r-ask{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,28px);border:1.5px dashed var(--line);border-radius:16px;background:var(--soot)}
.r-ask b{font-weight:500}
.r-ask span{color:var(--ash)}
@media (max-width:760px){.r-name-row{grid-template-columns:1fr}}

/* the founder, with room for his photo */
.r-founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,112px);align-items:center;padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-founder figure{margin:0}
.r-founder .role{margin-top:14px;color:var(--ash);font-size:clamp(16px,1.3vw,19px)}
.r-founder .role + p{margin-top:24px;font-size:clamp(18px,1.6vw,24px);max-width:34ch}
@media (max-width:860px){.r-founder{grid-template-columns:1fr}}

/* the team at the tables, and the two places */
.r-team{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.crew{list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.crew li{display:flex;flex-direction:column;gap:6px;min-width:0}
.crew .pic{aspect-ratio:4/5;border-radius:16px;overflow:hidden;margin-bottom:8px}
.crew .pic img{width:100%;height:100%;object-fit:cover}
.crew .r-todo{margin-bottom:8px}
.crew b{font-size:clamp(17px,1.4vw,21px);font-weight:400;letter-spacing:-.02em}
.crew span{color:var(--ash);font-size:15px}
.js .crew li{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d) * 110ms + 150ms)}
.js .crew.in li{opacity:1;transform:none}
.places{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--line)}
.places > div{padding:clamp(20px,3vw,40px) 16px 0 0}
.places > div + div{padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--line)}
.places b{display:block;font:300 clamp(40px,6vw,104px)/.9 var(--sans);letter-spacing:-.06em}
.places span{display:block;margin-top:12px;color:var(--ash)}
@media (max-width:900px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.places{grid-template-columns:1fr}.places > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:24px}}
@media (prefers-reduced-motion:reduce){.r-name .giant .w > span{animation:none}.js .crew li,.js .docs li,.js .steps3 li{opacity:1;transform:none;transition:none}}
@media (max-width:600px){.r-name .giant{font-size:52vw}}

/* ---------------------------------------------------------------- the collection pages, each its own way */
/* hero "band": the title, then one wide picture, then the words in two columns */
.r-hero--band .r-hero-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.r-hero--band .r-hero-img{order:-1;grid-column:1 / -1;aspect-ratio:21/8}
.r-hero--band .r-hero-img.prod{aspect-ratio:21/8}
.r-hero--band .r-hero-copy{display:contents}
.r-hero--band .lead{align-self:start}
.r-hero--band .acts{justify-content:flex-end;align-self:start;margin-top:0}
@media (max-width:860px){.r-hero--band .r-hero-row{grid-template-columns:1fr}.r-hero--band .r-hero-img,.r-hero--band .r-hero-img.prod{aspect-ratio:4/3}.r-hero--band .acts{justify-content:flex-start}}

/* sizes */
.r-sizes{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-sizes .r-head + .shelf{margin-top:clamp(40px,6vw,88px)}
/* sizes "ruler": a bar as long as the alpaca is tall, the alpaca standing at its end */
.ruler{list-style:none;margin:clamp(40px,6vw,88px) 0 0;padding:0;border-top:1px solid var(--line)}
.ruler li{display:grid;grid-template-columns:clamp(84px,10vw,150px) minmax(0,1fr) clamp(110px,14vw,200px);gap:clamp(12px,2vw,32px);align-items:center;padding:clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--line)}
.ruler .cm{font:300 clamp(40px,5.4vw,92px)/.9 var(--sans);letter-spacing:-.06em}
.ruler .cm small{font-size:.32em;letter-spacing:0;margin-left:4px;color:var(--ash)}
.ruler .bar{position:relative;height:clamp(64px,8vw,120px);display:flex;align-items:center}
.ruler .bar i{position:absolute;left:0;top:50%;height:clamp(8px,1vw,12px);width:calc(var(--w) * 100% - clamp(64px,8vw,120px));margin-top:calc(clamp(8px,1vw,12px) / -2);border-radius:999px;background:#F2EEE6;transform-origin:0 50%}
.ruler .bar img{position:absolute;left:calc(var(--w) * 100% - clamp(64px,8vw,120px));height:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.ruler .nm{display:flex;flex-direction:column;gap:4px;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em}
.ruler .nm small{font-size:14px;color:var(--ash);letter-spacing:0}
.js .ruler .bar i{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d) * 140ms + 150ms)}
.js .ruler.in .bar i{transform:none}
@media (max-width:640px){.ruler li{grid-template-columns:70px minmax(0,1fr)}.ruler .nm{grid-column:2}.ruler .bar{height:56px}}

/* colours "rail": one row of cards to scroll sideways */
.crail{margin-top:clamp(36px,5vw,72px)}
.crail h3{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;margin-bottom:18px}
.crail ul{list-style:none;margin:0 calc(var(--gut,24px) * -1);padding:0 var(--gut,24px) 12px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,24vw,320px);gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.crail li{scroll-snap-align:start;min-width:0}
.crail li > span{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15px}
.crail li > span i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* colours "panels": big blocks in the colour itself, the piece standing in it */
.cpanels{margin-top:clamp(36px,5vw,72px)}
.cpanels h3{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;margin-bottom:18px}
.cpanels ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(10px,1.4vw,20px)}
.cpanels li{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--c) 55%,#F2EEE6);display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.cpanels .pn-pic{position:absolute;inset:8% 8% 22%}
.cpanels .pn-pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cpanels b{position:relative;font:300 clamp(24px,2.4vw,36px)/1 var(--sans);letter-spacing:-.04em;color:#0B0B0A}
.js .cpanels li{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--d) * 90ms + 120ms)}
.js .cpanels.in li{opacity:1;transform:none}

/* prices "cards": one card per size, three prices down */
.pcards{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(10px,1.4vw,20px)}
.pcards li{padding:clamp(20px,2.4vw,32px);border-radius:20px;border:1px solid var(--line)}
.pcards li:nth-child(odd){background:var(--soot)}
.pcards b{display:block;font:300 clamp(28px,3vw,44px)/1 var(--sans);letter-spacing:-.04em}
.pcards .sub{display:block;margin-top:6px;color:var(--ash);font-size:14px}
.pcards dl{margin:22px 0 0;display:grid;gap:10px}
.pcards dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.pcards dt{color:var(--ash);font-size:14px}
.pcards dd{margin:0;font:300 clamp(22px,2vw,30px)/1 var(--sans);letter-spacing:-.03em}

/* story "full": the words over the fur, across the page (a dark island) */
.r-story-full{position:relative;min-height:clamp(240px,32vh,340px);display:flex;align-items:flex-end;overflow:hidden;background:#1a1410;color:#F2EEE6}
.r-story-full > img{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;filter:blur(6px) saturate(.9)}
.r-story-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.66))}
.r-story-full > div{position:relative;z-index:1;padding-top:48px;padding-bottom:clamp(40px,6vw,88px);max-width:900px}
.r-story-full p{margin-top:20px;font-size:clamp(18px,1.6vw,24px);max-width:36ch}
.r-story-full .r-h2{color:#F2EEE6}
.r-story.flip figure{order:2}
@media (max-width:860px){.r-story.flip figure{order:0}}

/* questions */
.r-faq{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.qa{margin-top:clamp(28px,4vw,56px);border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-size:clamp(19px,1.7vw,26px);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-weight:300;font-size:1.3em;line-height:.8}
.qa details[open] summary::after{content:"−"}
.qa p{padding:0 0 24px;max-width:60ch;color:var(--ash);font-size:clamp(16px,1.25vw,19px)}
@media (prefers-reduced-motion:reduce){.js .ruler .bar i,.js .cpanels li{opacity:1;transform:none;transition:none}}
.ptable td{vertical-align:bottom}

/* a smaller hero picture, for room photos that do not hold up large (the rugs) */
.r-hero-img.small{aspect-ratio:4/3;width:min(100%,520px);justify-self:end}
@media (max-width:860px){.r-hero-img.small{justify-self:stretch;width:100%}}
/* a room photo fills its colour card instead of standing on it */
.sw-pic.room img{object-fit:cover;padding:0;mix-blend-mode:normal}
@media (max-width:640px){.r-story{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.r-story figure{max-height:160px}}
/* the close-up on the right: the words keep the wide column */
.r-story.flip{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
@media (max-width:640px){.r-story.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
/* price cards: the tier name and the price with its saving stay on one line */
.pcards dt{white-space:nowrap}
.pcards dd{display:flex;align-items:center;white-space:nowrap}
/* colour cards: two side by side on a phone, never one card as wide as the screen */
@media (max-width:600px){.cgroup ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* product details: plain facts in two columns */
.r-facts{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(40px,6vw,88px);border-top:1px solid var(--line)}
.factlist{margin:clamp(28px,4vw,56px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,72px);border-top:1px solid var(--line)}
.factlist div{display:grid;grid-template-columns:minmax(120px,.45fr) minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.factlist dt{color:var(--ash);font-size:15px}
.factlist dd{margin:0;font-size:clamp(16px,1.25vw,18px)}
@media (max-width:760px){.factlist{grid-template-columns:1fr}.factlist div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* in your shop: one heading with its text beside it */
.r-shop{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px);border-top:1px solid var(--line)}
.r-shop .r-intro{color:var(--bone);font-size:clamp(18px,1.6vw,24px);max-width:40ch}

/* a second paragraph under the hero lead: how the collection works in a shop */
.r-hero .lead-2{margin-top:14px;font-size:clamp(17px,1.35vw,20px);color:var(--ash);max-width:38ch}
/* band hero: picture, then lead and second paragraph on the left, the buttons on the right */
.r-hero--band .r-hero-img{grid-row:1}
.r-hero--band .lead{grid-column:1;grid-row:2}
.r-hero--band .lead-2{grid-column:1;grid-row:3}
.r-hero--band .acts{grid-column:2;grid-row:2}
@media (max-width:860px){.r-hero--band .lead,.r-hero--band .lead-2,.r-hero--band .acts{grid-column:1;grid-row:auto}}
.r-hero--band .r-hero-row{row-gap:0}
.r-hero--band .r-hero-img{margin-bottom:clamp(24px,3vw,44px)}
/* what Tubi means, beside the h1 of the workshop: as large as on the home */
.r-name .lead{font-size:clamp(20px,1.9vw,30px);line-height:1.35;letter-spacing:-.01em;max-width:34ch}

/* the workshop on film (21 October 2026): three frames, big, medium and small, in place of the crew photos.
   Any clip fits: the frame sets the shape and the video covers it. */
.films{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(36px,5vw,72px)}
.films figure{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.films .clip{position:relative;border-radius:16px;overflow:hidden;background:var(--soot)}
.films video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.films figcaption{color:var(--ash);font-size:15px}
.films .f1{grid-column:1/8;grid-row:1/3}
.films .f1 .clip{aspect-ratio:1/1}
.films .f2{grid-column:8/13;grid-row:1}
.films .f2 .clip{aspect-ratio:4/3}
.films .f3{grid-column:10/13;grid-row:2;align-self:end}
.films .f3 .clip{aspect-ratio:1/1}
@media (max-width:900px){
  .films .f1{grid-column:1/-1;grid-row:auto}
  .films .f1 .clip{aspect-ratio:4/5}
  .films .f2{grid-column:1/8;grid-row:auto}
  .films .f2 .clip{aspect-ratio:4/5}
  .films .f3{grid-column:8/13;grid-row:auto}
}
/* how to order: the note under the tier cards (Ingmar, 22 October 2026) */
.r-tiers .tier-note{margin-top:18px;font-size:15px;color:var(--ash)}
/* the safety standards (compliance): the code is the heading, one card each */
.r-std{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.stds{list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,48px)}
.stds li{display:flex;flex-direction:column;padding-top:22px;border-top:2px solid var(--bone);min-width:0}
.stds h3{font:300 clamp(32px,3.4vw,56px)/1 var(--sans);letter-spacing:-.05em;overflow-wrap:anywhere}
.stds .what{margin-top:14px;font-size:clamp(17px,1.35vw,20px);color:var(--bone)}
.stds p{margin-top:10px;max-width:38ch;color:var(--ash)}
.stds a{color:var(--bone);text-underline-offset:4px}
.stds .st{margin-top:auto;padding-top:18px;color:var(--bone);font-size:15px}
@media (max-width:1000px){.stds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.stds{grid-template-columns:1fr}}
/* the guides (22 October 2026): long reading in the template look; tools/guides/ */
.g-toc{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.g-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px 32px;counter-reset:g}
.g-toc li{counter-increment:g;display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.g-toc li::before{content:counter(g,decimal-leading-zero);font:400 13px var(--mono);color:var(--ash)}
.g-toc a{color:var(--bone);text-decoration:none}
.g-toc a:hover{text-decoration:underline;text-underline-offset:4px}
.g-sec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,72px);padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(16px,2vw,24px);scroll-margin-top:90px}
.g-sec h2{font:300 clamp(30px,3.4vw,52px)/1 var(--sans);letter-spacing:-.045em;max-width:14ch;align-self:start;position:sticky;top:96px}
.g-body{min-width:0;max-width:66ch;font-size:clamp(17px,1.25vw,19px);line-height:1.6}
.g-body > * + *{margin-top:1em}
.g-body h3{font:500 clamp(18px,1.4vw,21px)/1.3 var(--sans);margin-top:1.6em}
.g-body ul,.g-body ol{padding-left:1.2em}
.g-body li + li{margin-top:.4em}
.g-body a{color:var(--bone);text-underline-offset:4px}
.g-body table{width:100%;border-collapse:collapse;font-size:16px}
.g-body th,.g-body td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.g-body th{font-weight:500}
.g-tbl{overflow-x:auto}
.g-body .g-note{color:var(--ash);font-size:16px}
@media (max-width:860px){.g-sec{grid-template-columns:1fr}.g-sec h2{position:static}}
.g-more,.g-src{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(24px,3vw,40px)}
.g-more h2,.g-src h2{font:300 clamp(28px,3vw,44px)/1 var(--sans);letter-spacing:-.04em;margin-bottom:24px}
.g-more ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.g-more li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.g-more a{color:var(--bone);font-size:clamp(18px,1.5vw,22px);text-underline-offset:5px}
.g-more span{color:var(--ash);font-size:14px;flex:none}
.g-src ol{margin:0;padding-left:1.2em;color:var(--ash);font-size:15px}
.g-src li + li{margin-top:6px}
.g-src a{color:var(--bone)}
.g-src p{margin-top:16px;color:var(--ash);font-size:15px;max-width:60ch}
.g-list{padding-bottom:clamp(72px,10vw,140px)}
.g-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.g-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px 32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);color:var(--bone);text-decoration:none}
.g-list b{font:300 clamp(24px,2.6vw,40px)/1.05 var(--sans);letter-spacing:-.04em}
.g-list span{color:var(--ash)}
.g-list em{font-style:normal;color:#E0523B;font-size:14px}
.g-list a:hover b{text-decoration:underline;text-underline-offset:6px}
@media (max-width:760px){.g-list a{grid-template-columns:1fr}}
.g-fig{margin:clamp(40px,5vw,80px) 0 0}
.g-fig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--soot)}
.g-fig figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--ash)}
.g-fig figcaption a{color:var(--ash)}
@media (max-width:600px){.g-fig img{aspect-ratio:4/3;border-radius:12px}}
/* the guides: a bar at the bottom of the screen with the collection, contact and a quotation */
.g-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--void);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.g-bar[hidden]{display:none}
.g-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding-block:10px}
.g-bar-l{color:var(--bone);text-decoration:none;font-size:15px;min-width:0}
.g-bar-l span{color:var(--ash)}
.g-bar-l b{font-weight:500;text-decoration:underline;text-underline-offset:4px}
.g-bar-a{display:flex;gap:8px;flex:none}
.g-bar-a .btn{min-height:44px;padding:0 18px;font-size:15px}
.g-bar-a .btn[href="alpaca-stuffed-animals"]{display:none}
body.g-barred .foot{padding-bottom:84px}
@media (max-width:860px){.g-bar-l{display:none}.g-bar-a{flex:1;gap:6px}.g-bar-a .btn{flex:1 1 auto;justify-content:center;padding:0 10px;font-size:13px;white-space:nowrap}.g-bar-a .btn--bone{flex-grow:1.6}.g-bar-a .btn[href="alpaca-stuffed-animals"]{display:inline-flex}}
/* compliance (22 October 2026): a clear PASS on each standard, and an "i" that explains each document */
.stds .pass{display:inline-block;margin-right:8px;padding:3px 10px;border-radius:999px;background:rgba(47,122,75,.12);color:#2F7A4B;font:600 13px/1.3 var(--sans);letter-spacing:.08em}
.docs .info{position:relative;display:inline-block;vertical-align:middle;margin-left:10px}
.docs .info button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ash);font:500 14px/1 var(--sans);font-style:italic;cursor:help;display:grid;place-items:center;padding:0}
.docs .info button:hover,.docs .info button:focus-visible{border-color:var(--bone);color:var(--bone)}
.docs .tip{position:absolute;left:0;top:calc(100% + 10px);z-index:20;width:min(320px,70vw);padding:12px 14px;border-radius:12px;background:#0B0B0A;color:#F2EEE6;font:400 15px/1.45 var(--sans);letter-spacing:0;box-shadow:0 12px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
.docs .info:hover .tip,.docs .info:focus-within .tip{opacity:1;visibility:visible;transform:none}
@media (max-width:700px){.docs li{position:relative}.docs .info{position:static}.docs .tip{left:36px;right:0;width:auto;top:auto;margin-top:10px}}
.docs .tip{display:none}.docs .info:hover .tip,.docs .info:focus-within .tip{display:block}
/* how to order: the photo of a label on an alpaca, in the frame of the label cards */
.lbl-ph{margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--soot)}
.lbl-ph img{display:block;width:100%;height:100%;object-fit:cover}
.lbl-ph img.brand{object-position:center 22%}
.r-two > .pl-strip{margin-top:clamp(28px,4vw,48px)}

/* retailers: the shop photos, kept shorter than a page heading */
.shop-look{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.shop-look h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.02;max-width:18em}
.shop-look > p{margin-top:12px;max-width:46ch;color:var(--ash);font-size:clamp(16px,1.3vw,18px);line-height:1.45}
.shop-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:clamp(18px,2.4vw,28px);min-width:0}
.shop-gal figure{margin:0}
.shop-gal img{display:block;width:100%;height:clamp(150px,16vw,240px);object-fit:cover;object-position:center 42%;border-radius:14px;background:var(--soot)}
@media (max-width:760px){
  .shop-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px}
  .shop-gal figure{flex:0 0 84%;scroll-snap-align:start}
  .shop-gal img{height:168px}
}
.r-pl{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.r-pl h2{font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.r-pl > p{margin-top:10px;max-width:46ch;color:var(--ash);font-size:17px;line-height:1.45}
/* The Tubi product photos (23 October 2026) carry their own beige backdrop, so they fill their card
   instead of standing inset on it. The placeholders without a backdrop keep the inset look. */
.sw-pic img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]),.pn-pic img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]),.r-hero-img.prod img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]),.r-more .pic img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]),.types figure.prod img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]),.ruler .bar img:is([src*="cat/naturals-"],[src*="cat/baristas-"],[src*="cat/rainbow-"],[src*="cat/monsterfluff-"],[src*="cat/zebra-"],[src*="cat/alpaca-teddy-bear-"],[src*="cat/rugs-"],[src*="cat/babyalpaca-"]){object-fit:cover;padding:0;mix-blend-mode:normal}
/* A longer language (Spanish: "Menos de 500 uds." and "Ahorre 1%") wraps the price under its label instead of running out of the card */
.pcards dl{grid-template-columns:minmax(0,1fr)}.pcards dl div{flex-wrap:wrap}
/* A longer language ("2 a 8 semanas", "15 a 48 cm") breaks onto a second line in its cell instead of running out of it */
.r-terms b{white-space:normal;text-wrap:balance}
/* retailers, Gifts that sell (23 October 2026): the shelf takes the beige of the Tubi photos' backdrop, and each
   photo's edges fade into it, so the four sizes stand on one surface instead of four lighter squares */
.shelf{background:#E8CFB4} /* the backdrop the shelf photos are evened to (media/shelf, 23 October 2026) */
.shelf img{mix-blend-mode:normal;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000);mask-composite:intersect}
.shelf figcaption{border-top-color:rgba(0,0,0,.14)}
@media (max-width:600px){.shelf figcaption span{white-space:normal;line-height:1.25}}
/* retailers: why a soft alpaca comforts (23 October 2026), a photo beside the summary of the benefits guide */
.r-comfort{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,88px);align-items:center;padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.r-comfort figure{margin:0}
.r-comfort img{display:block;width:100%;height:auto;border-radius:18px}
.r-comfort p{margin-top:clamp(18px,2vw,28px);max-width:52ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ash)}
.r-comfort .more{display:inline-block;margin-top:22px;color:var(--bone);text-underline-offset:5px}
@media (max-width:860px){.r-comfort{grid-template-columns:1fr}.r-comfort figure{order:2}}