:root{
  --paper:#fbfbfa; --surface:#f1f1ee; --studio:#edeceb; --line:#e3e3df; --line-strong:#cfcfca;
  --ink:#1d1d1b; --ink-muted:#4f514c; --ink-faint:#6a6c67;
  --accent:#1c6d45; --accent-strong:#175c3a; --on-accent:#fbfbfa;
  --display:"Ysabeau","Gill Sans","Trebuchet MS",sans-serif;
  --text:"Onest","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(18px,4vw,72px); --max:1720px; --cg:clamp(20px,2vw,32px);
  --ease:cubic-bezier(.22,.61,.24,1);
  --slide:cubic-bezier(.65,0,.35,1);
  --field-line:#8a8c86;
  --sel:rgba(28,109,69,.075);
  --hdr:92px;
  color-scheme:light;
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}   /* headings take focus only so screen readers announce them: never a ring */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* the island (the homepage's): the logo sits on the page and only the menu button has its small white island; once
   the page moves, or on hover, the island stretches left to take in the logo */
.island{position:fixed;z-index:40;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 32px);border-radius:16px;
  transition:width .55s var(--ease),top .55s var(--ease),border-radius .55s var(--ease),opacity 1.2s var(--ease) .45s,visibility 0s .45s}
.island::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:calc(100% - 50px);
  background:#fff;border:1px solid var(--line);border-radius:inherit;box-shadow:0 8px 28px rgba(29,29,27,.07);
  transition:left .9s var(--ease) .45s,background-color 1s var(--ease),border-color 1s var(--ease),box-shadow 1s var(--ease)}
.island:hover::before,.island:has(:focus-visible)::before,.island.full::before{left:0;transition:left .7s var(--ease),background-color 1s var(--ease),border-color 1s var(--ease),box-shadow 1s var(--ease)}
.island.open::before{left:0;transition:left .45s var(--ease),background-color 1s var(--ease),border-color 1s var(--ease),box-shadow 1s var(--ease)}
.island.compact{top:calc(env(safe-area-inset-top,0px) + 10px)}
.island.open{width:min(560px,calc(100vw - 32px));border-radius:20px}
.bar{display:flex;align-items:center;gap:7px;padding:6px 6px 6px 16px;min-height:50px}
.reveal{flex:1 1 auto;display:grid;grid-template-columns:0fr;transition:grid-template-columns .55s var(--ease),visibility 0s .55s;visibility:hidden}
.open .reveal{grid-template-columns:1fr;visibility:visible;transition:grid-template-columns .55s var(--ease),visibility 0s}
.reveal > div{min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:8px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.open .reveal > div{opacity:1;visibility:visible;transition:opacity .35s .18s,visibility 0s}
.here{font:500 11.5px/1.2 var(--text);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.cta{background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:500;font-size:13.5px;padding:9px 14px;border-radius:10px;white-space:nowrap}
.cta:hover{background:var(--accent-strong)}
.logo{width:54px;height:auto;color:var(--accent);flex:none;display:block;transition:color 1s var(--ease)}
.burger{width:38px;height:38px;border:0;border-radius:10px;background:none;display:grid;place-content:center;gap:5px;cursor:pointer;padding:0}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease),background-color 1s var(--ease)}
html.bg-green .island:not(.open)::before,html.on-dark .island:not(.open)::before{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:0 8px 28px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.bg-green .island:not(.open) .logo,html.on-dark .island:not(.open) .logo{color:#fff}
html.bg-green .island:not(.open) .burger span,html.on-dark .island:not(.open) .burger span{background:#fff}
/* as the page deepens to green (and back), the island turns on the body's own 2.8 s curve, so its white mark never
   sits on paper and its green mark never sits on forest green */
html.bg-green .island:not(.open)::before,html.bg-fade .island:not(.open)::before{transition:left .7s var(--ease),background-color 2.8s cubic-bezier(.4,0,.2,1),border-color 2.8s cubic-bezier(.4,0,.2,1),box-shadow 2.8s cubic-bezier(.4,0,.2,1)}
html.bg-green .island:not(.open) .logo,html.bg-fade .island:not(.open) .logo{transition:color 2.8s cubic-bezier(.4,0,.2,1)}
html.bg-green .island:not(.open) .burger span,html.bg-fade .island:not(.open) .burger span{transition:transform .45s var(--ease),background-color 2.8s cubic-bezier(.4,0,.2,1)}
.open .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.open .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease),visibility 0s .55s;visibility:hidden;contain:inline-size}
.open .menu{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
.menu > div{overflow:hidden}
.open .menu > div{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
.menu nav{position:relative;display:grid;padding:6px 18px 4px}
.sec > a{font:300 clamp(26px,3.4vw,34px)/1.25 var(--display);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;transition:color .25s}
.sec > a::after{content:"\2192";font:400 16px/1 var(--text);color:var(--accent);opacity:0;transform:translateX(-6px);transition:.35s var(--ease)}
.sec > a:hover::after,.sec.on > a::after{opacity:1;transform:none}
.sec.cur > a{color:var(--accent)}
.subs{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.sec.on .subs{grid-template-rows:1fr}
.subs ul{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden}
.subs li:first-child{padding-top:6px}
.subs li:last-child{padding-bottom:10px}
.subs a{display:block;text-decoration:none;color:var(--ink-muted);font-size:15px;padding:6px 0;transition:color .2s,transform .3s var(--ease)}
.subs a:hover{color:var(--accent);transform:translateX(3px)}
.subs a[aria-current]{color:var(--accent);font-weight:500}
.subs a[aria-current]::after{content:"\2192";margin-left:8px;font-weight:400}
@media (hover:hover) and (min-width:760px){
  .island.open{width:min(720px,calc(100vw - 32px))}
  .menu nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px}
  .sec{grid-column:1}
  .sec.on > a{color:var(--accent)}
  .subs{display:block;position:absolute;top:12px;left:calc(50% + 18px);right:18px;
    opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .35s var(--ease),visibility 0s .2s}
  .sec.on .subs{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease),visibility 0s}
  .subs ul{overflow:visible}
  .subs li:first-child{padding-top:0}
}
.mfoot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;margin:10px 6px 6px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink-faint)}
.mfoot a{color:var(--ink-muted);text-decoration:none}
.mfoot a:hover{color:var(--accent)}
.mfoot .langs{display:flex;gap:10px;letter-spacing:.06em}
.mfoot .langs b{color:var(--accent);font-weight:500}
.demo-tag{position:fixed;right:12px;bottom:12px;z-index:30;font:500 10.5px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;background:var(--surface);color:var(--ink-faint);padding:6px 8px;border:1px solid var(--line)}
.js .demo-tag{transition:opacity 1.2s var(--ease) .45s,visibility 0s .45s}
html.h-intro .island,html.h-intro .demo-tag{opacity:0;visibility:hidden}

/* type */
.eyebrow{font:500 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)}
h1,h2{font-family:var(--display);font-weight:300;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,3.6vw,64px);line-height:1}
h2{font-size:clamp(34px,4.2vw,64px);line-height:1}
.lede{max-width:46ch;color:var(--ink-muted);font-size:17px;margin:20px 0 0}
.more{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-size:14.5px;font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
section{position:relative}
.chapter{padding-block:clamp(120px,15vw,220px)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font:500 15px/1 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--accent-strong)}
.btn:active{transform:scale(.98)}
.nw{white-space:nowrap}
.split-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:end}
.split-head > :first-child{grid-column:1/span 6}
.split-head > .lede{grid-column:8/span 5;margin:0}

/* shared motion (the homepage's 05-08 primitives). Every hidden start state lives under html.js, so the page reads in
   full without the script; arrive() adds .in to a block once, when it shows. Text rises out of a mask (.rv, 90 ms apart
   through --t); prints open with a clip from the bottom (.pr). Nothing below the island and loader animates opacity. */
.rv{display:block;overflow:hidden;padding-bottom:.08em}
h1.rv,h2.rv{padding-top:.06em;margin-top:-.06em}
.rv > *{display:block;transition:transform .95s var(--ease) var(--t,0s)}
.js .rv > *{transform:translateY(105%)}
.js .in .rv > *,.js .rv.in > *{transform:none}
.eyebrow.rv{display:block}
.eyebrow.rv::before{content:none}
.eyebrow.rv > span{display:flex;align-items:center;gap:12px}
.eyebrow.rv > span::before{content:"";width:24px;height:2px;background:var(--accent)}
.pr{clip-path:inset(0);transition:clip-path 1.3s var(--slide) var(--t,0s)}
.pr img{transition:transform 2s var(--ease) var(--t,0s)}
.js .pr{clip-path:inset(100% 0 0 0)}
.js .pr img{transform:translateY(-8%) scale(1.12)}
.js .in .pr{clip-path:inset(0)}
.js .in .pr img{transform:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ch{display:inline-block;transition:transform .7s var(--ease)}
/* a row of controls in a mask: 6 px of room each side so focus rings are never clipped */
.rv.ctl{padding:6px;margin-inline:-6px;margin-bottom:-6px}
.js .rv.ctl > *{transform:translateY(calc(105% + 12px))}
.js .in .rv.ctl > *,.js .rv.ctl.in > *{transform:none}

/* footer (the homepage's colophon) */
.colophon{background:#0b2a1c;color:rgba(255,255,255,.86);padding:clamp(88px,10vw,140px) 0 72px}
.colophon{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.colophon > .wrap{width:100%}
.colophon > .c-grid{margin:auto}
.colophon :focus-visible{outline-color:#7fbf9b}
.c-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2vw,32px)}
.c-mark{grid-column:1/span 6}
.c-logo{position:relative;width:clamp(150px,14vw,240px);aspect-ratio:120/53.4}
.c-logo svg{position:absolute;inset:0;width:100%;height:100%}
.c-base{color:rgba(255,255,255,.14)}
.c-fill{color:#fff;clip-path:inset(0);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1)}
.js .colophon:not(.in) .c-fill{clip-path:inset(100% 0 0 0)}
.c-line{margin:32px 0 0;max-width:22ch;font:300 clamp(26px,2.4vw,40px)/1.15 var(--display);letter-spacing:-.01em;color:#fff;font-variant-numeric:lining-nums;--t:.3s}
.c-toc{grid-column:8/span 5}
.c-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:32px}
.c-toc li{margin:0 -6px;padding-left:6px;padding-right:6px}
.c-toc li > *{transition-duration:.7s}
.c-toc a{display:flex;align-items:baseline;gap:14px;margin:0 -6px;padding:9px 6px;color:#fff;text-decoration:none}
.c-toc a:focus-visible{outline-offset:-2px}
.c-toc .n{flex:none;font:500 12px/1 var(--text);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.c-toc .t{display:inline-block;font:300 clamp(22px,1.8vw,28px)/1.2 var(--display);transition:color .35s var(--ease),transform .35s var(--ease)}
.c-toc a:hover .t,.c-toc a:focus-visible .t{color:#7fbf9b;transform:translateX(4px)}
.c-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(72px,8vw,120px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.5;color:rgba(255,255,255,.66)}
.c-bar p{margin:0}
.c-bar a{color:inherit;text-decoration:none}
.c-bar a:hover{color:#fff}
.c-langs{display:flex;flex-wrap:wrap;gap:6px 16px}
.c-langs [aria-current]{color:#fff;font-weight:500}

/* One colour of the BHR Spinning colour card, in the site's own look. One small section, the series strip, is styled
   by the yarn: build.py sets --yc (the colour from our photo), --yc-deep (the same hue, 7:1 on white), --yc-mid,
   --yc-tint and --yc-tint2 on <main>, and the roll's WebGL colours the fabric.
   Tokens, island, type, motion and colophon come from the yarn page (build.py slices them above). */
.crumbs{list-style:none;padding:0;margin:0;flex-wrap:wrap;gap:0 12px}
.crumbs-w{margin-bottom:clamp(28px,4vw,56px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-hidden]{color:var(--line-strong)}
.crumbs [aria-current]{color:var(--ink-muted)}
.rv > .crumbs{display:flex}
.yc .eyebrow .n{color:var(--accent);font-variant-numeric:lining-nums tabular-nums;margin-right:4px}
.yc h2{font-variant-numeric:lining-nums}
.yc .nw{white-space:nowrap}

/* ---- the hero: the yarn, its code and its specs */
.yc-hero{padding-top:calc(var(--hdr) + clamp(24px,4vw,64px));padding-bottom:clamp(56px,7vw,104px)}
.yc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center}
/* the stage: the 3D yarn drawn across a soft panel, corner to corner, with our photo of it on the card set into the
   panel's corner. On arrival the thread draws in from the left, then the card photo rises. */
.yc-stage{grid-column:1/span 7;position:relative;margin:0;min-width:0}
.yc-thread{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--surface)}
.yc-thread img{display:block;width:100%;height:100%;object-fit:cover;scale:1.12;mix-blend-mode:multiply;
  clip-path:inset(0);transition:clip-path 1.6s var(--slide) .15s}
.js .yc-hero:not(.in) .yc-thread img{clip-path:inset(0 100% 0 0)}
.yc-card{position:absolute;right:-2.5%;bottom:9%;width:29%;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--sw);
  box-shadow:0 0 0 6px var(--paper),0 22px 44px rgba(0,0,0,.16);transition:translate 1s var(--slide) .9s,clip-path 1s var(--slide) .9s;clip-path:inset(-60px)}
.js .yc-hero:not(.in) .yc-card{translate:0 28px;clip-path:inset(100% -60px -60px -60px)}
.yc-card img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.yc-card span{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:7px;background:rgba(251,251,250,.92);font:500 11px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
@media (hover:hover){.yc-card:hover img{scale:1.06}}
.yc-stage figcaption{margin-top:14px;font-size:12.5px;color:var(--ink-faint)}
.yc-copy{grid-column:8/span 5;min-width:0}
.yc-copy h1{font-size:clamp(56px,7vw,120px);line-height:.95;font-variant-numeric:lining-nums tabular-nums}
.yc-comp{margin:14px 0 0;font:300 clamp(22px,2vw,30px)/1.2 var(--display);color:var(--ink-muted)}
.yc-flag{display:flex;gap:10px;align-items:baseline;max-width:44ch;margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.yc-flag b{font-weight:500;color:var(--ink)}
/* the specs as tiles: what the card prints and what we read from it; count, twist and packing are BHR's to give */
.yc-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:640px;margin:clamp(24px,3vw,36px) 0 0;padding:0}
.yc-tiles li{min-width:0;padding:14px 16px 16px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.yc-tiles small{display:block;font:500 11px/1.3 var(--text);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.yc-tiles b{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 15.5px/1.3 var(--text);color:var(--ink);font-variant-numeric:lining-nums;overflow-wrap:anywhere}
.yc-tiles b i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.yc-tiles span{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink-faint)}
.yc-tiles .ask{background:var(--accent);box-shadow:none}
.yc-tiles .ask small,.yc-tiles .ask span{color:rgba(251,251,250,.8)}
.yc-tiles .ask a:focus-visible{outline-color:var(--paper)}   /* the ring is --accent, the tile's own colour */
.yc-tiles .ask a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(251,251,250,.6)}
.yc-tiles .ask a::after{content:" \2192"}
.yc-act{margin-top:clamp(24px,3vw,36px)}
.yc-act > div{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.yc-act .more{margin-top:0}

/* ---- the page's menu: sticky under the island, the current section marked in the yarn's colour */
.yc-tabs{position:sticky;top:0;z-index:30;background:rgba(251,251,250,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.yc-tabs-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.yc-tabs ol{list-style:none;display:flex;gap:6px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.yc-tabs ol::-webkit-scrollbar{display:none}
.yc-tabs a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:19px;font:500 13.5px/1 var(--text);color:var(--ink-muted);text-decoration:none;white-space:nowrap;transition:background-color .25s,color .25s}
.yc-tabs a .n{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.yc-tabs a:hover{color:var(--ink)}
.yc-tabs a.on{background:var(--surface);color:var(--accent)}
.yc-tabs a.on .n{color:var(--accent)}
.yc-tabs .yc-tabs-ask{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:10px;background:var(--accent);color:var(--paper);font:500 14px/1 var(--text);text-decoration:none;white-space:nowrap}
.yc section[id]{scroll-margin-top:72px}

/* ---- 01 fabric: single jersey close up (tools/blender/knit_threads.py) and a roll that unrolls as the page scrolls:
   one grey frame sequence for every yarn (tools/blender/fabric_roll_photo.py), coloured in WebGL (colour.js).
   The roll is a whole photograph, on its own paper (opaque, 4:3): it sits in a rounded photo frame like the close-up
   beside it, kept 4:3 and never taller than the screen allows (the cap is on its width, so the frame stays the photo's).
   With motion, the section is tall and its content held in view while the roll plays. */
.yc-fabrics{position:relative;background:var(--paper)}
.motion .yc-fabrics.live{height:250vh}
.yc-fab-pin{padding-block:clamp(72px,9vw,128px)}
.motion .yc-fabrics.live .yc-fab-pin{position:sticky;top:0;height:100vh;height:100svh;padding-block:72px 24px;display:flex;align-items:center;overflow:hidden}
.yc-fab-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center;width:100%}
.yc-fab-copy{grid-column:1/span 4;min-width:0}
.yc-fab-copy .lede{margin:18px 0 0;max-width:34ch}
.yc-fab{margin:clamp(24px,3vw,36px) 0 0;max-width:320px}
.yc-fab img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.yc-fab figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-faint)}
.yc-fab-roll{grid-column:5/span 8;min-width:0;position:relative;width:100%;margin-inline:auto;
  max-width:calc((100vh - 140px) * 4 / 3);max-width:calc((100svh - 140px) * 4 / 3)}
.yc-roll{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px}
.js .yc-roll{background:var(--studio)}   /* the photo's paper, until its first frame arrives */
.yc-roll-hint{position:absolute;left:4%;bottom:4%;display:flex;align-items:center;gap:12px;margin:0;padding:7px 12px 7px 10px;border-radius:8px;
  background:rgba(251,251,250,.86);font:500 11.5px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);transition:opacity .4s}   /* a chip: on the photo's paper the bare text would fall under 4.5:1 */
.yc-roll-hint span{position:relative;width:64px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.yc-roll-hint span::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
.yc-fabrics:not(.live) .yc-roll-hint,.yc-fabrics:not(.live) .roll-only{display:none}
/* no roll (no WebGL, or its frames failed): the close-up stands alone, the copy across the grid */
.yc-fabrics.no-roll .yc-fab-copy{grid-column:1/span 6}
.yc-fabrics.no-roll .yc-fab{max-width:560px}

/* ---- 02 what's inside: the fibres as the card prints them, what each brings, and what a melange is */
.yc-inside{padding-block:clamp(72px,9vw,140px);border-top:1px solid var(--line)}
.yc-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.yc-in-head{grid-column:1/span 6;grid-row:1;min-width:0}
.yc-in-head .lede{margin:18px 0 0}
.yc-in-list{grid-column:1/span 6;grid-row:2;min-width:0;margin-top:clamp(28px,3vw,40px)}
.yc-close{grid-column:8/span 5;grid-row:1/span 2;align-self:start;margin:0;min-width:0}
.yc-close img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px;background:var(--sw)}
.yc-close figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-faint)}
.yc-bar > div{display:flex;gap:4px;height:18px;max-width:520px;margin-top:clamp(24px,3vw,40px);border-radius:9px;overflow:hidden}
.yc-bar span{display:block;min-width:0}
.f0{background:var(--accent)}
.f1{background:#8db59d}
.f2{background:#c8d9cd}
.yc-bar .unk{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px)}
.yc-bar-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-faint)}
.yc-fibres{list-style:none;margin:0;padding:0}
.yc-fibres li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.yc-fibres li:last-child{border-bottom:1px solid var(--line)}
.yc-fibres i{width:12px;height:12px;border-radius:50%;align-self:center}
.yc-fibres b{font:500 17px/1.3 var(--text)}
.yc-fibres .pct{font:500 17px/1.3 var(--text);font-variant-numeric:lining-nums tabular-nums;color:var(--ink-muted)}
.yc-fibres p{grid-column:2/-1;margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
.yc-mel{margin-top:clamp(24px,2.8vw,36px)}
.yc-mel h3{margin:0 0 8px;font:500 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.yc-mel p{max-width:52ch;margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-muted)}

/* ---- 03 how strong it is: the yarn holding a 200 g steel weight (tools/blender/yarn_weight.py) and the typical
   breaking load of one yarn, with how the blend wears; typical figures and our guide, not tests of this yarn */
.yc-strength{padding-block:clamp(72px,9vw,140px);border-top:1px solid var(--line)}
.yc-st{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center}
.yc-st-fig{grid-column:1/span 5;margin:0;min-width:0}
.yc-st-fig img{display:block;width:min(100%,440px);height:auto;margin:0 auto;
  -webkit-mask-image:linear-gradient(#0000,#000 22%);mask-image:linear-gradient(#0000,#000 22%)}   /* the yarn comes down from above */
.yc-st-fig figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-faint);text-align:center}
.yc-st-copy{grid-column:7/span 6;min-width:0}
.yc-st-copy .lede{margin:20px 0 0;max-width:46ch}
.yc-rate{margin:clamp(28px,3vw,40px) 0 0;max-width:520px}
.yc-rate h3{margin:0 0 6px;font:500 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.yc-rate ul{list-style:none;margin:0;padding:0}
.yc-rate li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.yc-rate li:last-child{border-bottom:1px solid var(--line)}
.yc-stars{display:inline-flex;gap:3px;color:var(--accent);font-size:17px;letter-spacing:0;line-height:1}
.yc-stars .off{color:var(--line-strong)}
.yc-st-note{margin:12px 0 0;max-width:520px;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}

/* ---- 04 the series, the page's one section in its yarn's colour: every colour of this strip of the card on the yarn's
   tint, the current one ringed in its deep shade */
.yc-series{padding-block:clamp(72px,9vw,128px);background:var(--yc-tint)}
.yc-series .eyebrow .n{color:var(--yc-deep)}
.yc-series .eyebrow.rv > span::before{background:var(--yc-deep)}
.yc-series h2{color:var(--yc-deep)}
.yc-series .lede{margin:18px 0 0}
.yc-sib{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 12px;margin:clamp(32px,4vw,48px) 0 0;padding:0}
.yc-sib a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 6px 14px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background-color .25s}
.yc-sib i{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--sw);box-shadow:0 6px 16px rgba(0,0,0,.1);transition:border-radius .55s var(--slide)}
.yc-sib img{width:100%;height:100%;object-fit:cover}
.yc-sib b{font:500 14px/1.2 var(--text);font-variant-numeric:lining-nums tabular-nums}
.yc-sib a[aria-current]{background:var(--yc-tint2)}
.yc-sib a[aria-current] i{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--yc-deep)}
.yc-sib a[aria-current] b{color:var(--yc-deep)}
@media (hover:hover){.yc-sib a:hover i{border-radius:0}.yc-sib a:hover{background:var(--yc-tint2)}}

/* the codes either side, as two cards with their threads */
.yc-near{padding:clamp(56px,7vw,96px) 0}
.yc-near-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--cg)}
.yc-near a{display:flex;align-items:center;gap:20px;padding:14px;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:var(--ink);background:var(--paper);
  transition:border-color .3s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease)}
.yc-near a.next{grid-column:2;flex-direction:row-reverse;text-align:right}
.yc-near-img{flex:none;width:clamp(120px,14vw,200px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--surface)}
.yc-near-img img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:scale 1s var(--ease)}
.yc-near-t small{display:block;font-size:12.5px;color:var(--ink-faint)}
.yc-near-t b{display:block;margin:4px 0;font:300 clamp(26px,2.4vw,36px)/1.05 var(--display);font-variant-numeric:lining-nums tabular-nums}
@media (hover:hover){.yc-near a:hover{border-color:var(--line-strong);translate:0 -3px;box-shadow:0 14px 34px rgba(0,0,0,.07)}.yc-near a:hover .yc-near-img img{scale:1.06}}

/* the close, on the colophon's green, so the page runs on into it: ask for this colour */
.yc-ask{background:#0b2a1c;color:#fff;padding:clamp(96px,11vw,160px) 0 clamp(72px,8vw,112px)}
.yc-ask-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center}
.yc-ask-text{grid-column:1/span 7;min-width:0}
.yc-ask .eyebrow,.yc-ask .eyebrow .n{color:rgba(255,255,255,.72)}
.yc-ask .eyebrow.rv > span::before{background:#7fbf9b}
.yc-ask h2{font-size:clamp(44px,5.4vw,88px);color:#fff}
.yc-ask .lede{margin:22px 0 0;max-width:40ch;color:rgba(255,255,255,.78)}
.yc-ask-act{margin-top:clamp(28px,3vw,40px)}
.yc-ask-act > div{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.yc-ask .btn{background:#fbfbfa;color:#0b2a1c}
.yc-ask .btn:hover{background:#fff}
.yc-ask-mail{font-size:15px;font-weight:500;color:#fff;text-underline-offset:3px}
.yc-ask :focus-visible{outline-color:#7fbf9b}
.yc-ask-fig{grid-column:9/span 4;margin:0;min-width:0}
.yc-ask-fig img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--sw);box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.colophon{padding-top:clamp(56px,6vw,96px)}   /* straight on from the green close */

/* short screens (a 1366 x 768 laptop): a smaller close-up, so the pinned panel still holds everything */
@media (max-height:800px) and (min-width:900px){
  .yc-fab{max-width:210px;margin-top:20px}
  .yc-fab-copy h2{font-size:clamp(30px,3.4vw,48px)}
}
/* a short phone: the sentence gives way so the roll still plays in place */
@media (max-width:899px) and (max-height:700px){
  .yc-fab-copy .lede{display:none}
}
/* the island sits at the top centre: on narrower screens the menu drops below it */
@media (max-width:1279px){
  .yc-tabs{top:68px}
  .yc section[id]{scroll-margin-top:136px}
  .motion .yc-fabrics.live .yc-fab-pin{padding-top:128px}
}
@media (max-width:899px){
  .yc-grid{display:block}
  .yc-card{right:12px;bottom:-14px;width:32%}
  .yc-stage figcaption{margin-top:30px;padding-right:36%}   /* clear of the card photo beside it */
  .yc-in{display:block}
  .yc-close{margin-top:36px;max-width:420px}
  .yc-ask-in{display:block}
  .yc-ask-fig{width:min(56%,260px);margin-top:44px}
  .yc-copy{margin-top:32px}
  .yc-st,.yc-in{display:block}
  .yc-in-list{margin-top:36px}
  .yc-st-fig img{width:min(78%,360px)}
  .yc-st-copy{margin-top:36px}
  .yc-fab-in{display:flex;flex-direction:column;align-items:stretch}
  .yc-fab-copy{order:1}
  .yc-fab-roll{order:2;margin-top:12px}
  .yc-fab{display:none}
  .yc-fabrics.no-roll .yc-fab{display:block}
  /* on a phone the photo keeps its frame within the gutters: both ends of the roll are in it, so none of it is cropped */
  .motion .yc-fabrics.live .yc-fab-pin{padding-top:142px;align-items:flex-start}   /* clear of the island and the menu under it */
  .yc-fab-copy .lede{font-size:16px}
  .yc-roll-hint{position:static;margin-top:8px;padding:0;background:none}
  .motion .yc-fabrics.live{height:210vh}
  .split-head{display:block}
  .split-head > .lede{margin-top:20px}
  .c-mark,.c-toc{grid-column:1/-1}
  .c-toc{margin-top:56px}
}
@media (max-width:759px){
  .yc-copy h1{font-size:64px}
  .yc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yc-act > div{flex-direction:column;align-items:stretch}
  .yc-act .btn{width:100%;height:54px}
  .yc-act .more{align-self:center}
  .yc-tabs .yc-tabs-ask{display:none}
  .yc-tabs-in{min-height:56px}
  .yc-tabs a{height:34px;padding:0 10px;font-size:13px}
  .yc-tabs a .n,.yc-tabs .tab-x{display:none}
  .yc-tabs ol{gap:2px}
  .yc-near-in{grid-template-columns:1fr}
  .yc-near a.next{grid-column:1}
  .yc-near-img{width:96px}
  .yc-ask-act > div{flex-direction:column;align-items:stretch}
  .yc-ask .btn{width:100%;height:54px}
  .yc-ask-mail{align-self:center}
  .yc-sib{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .yc-sib i{width:60px;height:60px}
  .colophon{padding:72px 0 96px}
  .c-grid{display:block}
  .c-logo{width:132px}
  .c-line{font-size:26px}
  .c-toc ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .c-toc a{min-height:44px}
  .c-bar{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}