/* Yarn Knowledge: a reading path from basic terms to a material brief. */
body.dsk-refined main.yarn-learning-page{--yarn-section-space:64px;--yarn-copy:#344a3e;color:var(--ink)}
body.dsk-refined main.yarn-learning-page>.section{padding-block:var(--yarn-section-space)}
body.dsk-refined main.yarn-learning-page :is(section,aside)[id]{scroll-margin-top:120px}
body.dsk-refined main.yarn-learning-page :is(h1,h2,h3){text-wrap:balance}
body.dsk-refined main.yarn-learning-page h2{margin:0 0 16px;font-size:clamp(32px,3.3vw,44px);line-height:1.12}
body.dsk-refined main.yarn-learning-page h3{margin:0 0 12px;font-size:26px;line-height:1.2}
body.dsk-refined main.yarn-learning-page p,body.dsk-refined main.yarn-learning-page dd,body.dsk-refined main.yarn-learning-page li{font-size:16px;line-height:1.75;color:var(--yarn-copy)}
body.dsk-refined main.yarn-learning-page a{text-underline-offset:5px}
body.dsk-refined main.yarn-learning-page a:focus-visible,body.dsk-refined main.yarn-learning-page summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
body.dsk-refined main.yarn-learning-page .btn{min-height:44px;max-width:100%;text-align:center;white-space:normal}
body.dsk-refined main.yarn-learning-page .btn:hover{color:#fff}
body.dsk-refined main.yarn-learning-page .yarn-text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-size:14px;font-weight:700}
body.dsk-refined main.yarn-learning-page .yarn-text-link:hover{color:var(--green-dark)}
body.dsk-refined main.yarn-learning-page .materials-hero{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:0;border-bottom:1px solid var(--line);background:#efe7db}
body.dsk-refined main.yarn-learning-page .materials-hero img.materials-hero-visual{position:absolute;inset:0;z-index:0;display:block;width:100%;max-width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center;filter:none;margin:0;padding:0;border:0;pointer-events:none}
body.dsk-refined main.yarn-learning-page .materials-hero>.wp-block-image{position:absolute;inset:0;width:100%;height:100%;margin:0}
body.dsk-refined main.yarn-learning-page .materials-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(247,246,242,.8),rgba(247,246,242,.62) 48%,rgba(247,246,242,.08) 78%)}
body.dsk-refined main.yarn-learning-page .materials-hero>.shell{position:relative;z-index:2;padding-block:64px}
body.dsk-refined main.yarn-learning-page .materials-hero-copy{width:62%;max-width:720px}
body.dsk-refined main.yarn-learning-page .materials-hero h1{max-width:18ch;margin:0 0 24px;font-size:clamp(40px,5.3vw,68px);line-height:1.08;color:#203d32}
body.dsk-refined main.yarn-learning-page .materials-hero p{max-width:58ch;margin:0;font-size:17px;line-height:1.75}
body.dsk-refined main.yarn-learning-page .yarn-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
body.dsk-refined main.yarn-learning-page .yarn-page-nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;padding-block:12px;border-bottom:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-page-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--green);text-decoration:none}
body.dsk-refined main.yarn-learning-page .yarn-page-nav a:hover{text-decoration:underline}
body.dsk-refined main.yarn-learning-page .yarn-section-intro{max-width:760px;margin-bottom:32px}
body.dsk-refined main.yarn-learning-page .yarn-section-intro p{max-width:65ch;margin:0}
body.dsk-refined main.yarn-learning-page .yarn-basics-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0}
body.dsk-refined main.yarn-learning-page .yarn-basics-list>div{border-top:1px solid var(--line);padding-top:20px;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-basics-list dt{font-family:var(--serif);font-size:26px;line-height:1.2;margin-bottom:12px}
body.dsk-refined main.yarn-learning-page .yarn-basics-list dd{margin:0}
body.dsk-refined main.yarn-learning-page dd.yarn-definition-link{margin-top:12px;font-size:14px}
body.dsk-refined main.yarn-learning-page .yarn-definition-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--green)}
body.dsk-refined main.yarn-learning-page .yarn-material-directory{border-top:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-heading-with-link{display:flex;align-items:end;justify-content:space-between;gap:24px;max-width:none}
body.dsk-refined main.yarn-learning-page .yarn-heading-with-link>div{max-width:720px}
body.dsk-refined main.yarn-learning-page .yarn-heading-with-link>.yarn-text-link{flex-shrink:0}
body.dsk-refined main.yarn-learning-page .yarn-family-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
body.dsk-refined main.yarn-learning-page .yarn-family-list article{padding-block:24px;border-bottom:1px solid var(--line);min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-family-list article p{max-width:58ch;margin:0}
body.dsk-refined main.yarn-learning-page .yarn-inline-links{display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;margin-top:12px}
body.dsk-refined main.yarn-learning-page .yarn-inline-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-size:14px;font-weight:600}
body.dsk-refined main.yarn-learning-page .yarn-cotton-feature{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:64px;align-items:center;border-bottom:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-cotton-figure{margin:0;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-cotton-figure a{display:block}
body.dsk-refined main.yarn-learning-page .yarn-cotton-figure img{display:block;width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:cover;filter:none;margin:0;padding:0;border:0;background:transparent}
body.dsk-refined main.yarn-learning-page .yarn-cotton-figure figcaption{margin-top:12px;font-size:12px;line-height:1.6;color:var(--yarn-copy)}
body.dsk-refined main.yarn-learning-page .yarn-cotton-figure figcaption a{display:inline}
body.dsk-refined main.yarn-learning-page .yarn-cotton-feature>div{max-width:65ch;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-cotton-feature p{margin:0 0 16px}
body.dsk-refined main.yarn-learning-page .yarn-cotton-feature ul{padding-left:20px;margin:0 0 24px}
body.dsk-refined main.yarn-learning-page .yarn-cotton-feature li{margin-bottom:8px}
body.dsk-refined main.yarn-learning-page .yarn-reading-list{border-top:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-reading-list article{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start;padding-block:24px;border-bottom:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-reading-list h3{font-size:25px;margin:0;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-reading-list h3 a{color:var(--green)}
body.dsk-refined main.yarn-learning-page .yarn-reading-list p{max-width:65ch;margin:0;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-checklist-list{margin:0;border-top:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-checklist-list>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding-block:20px;border-bottom:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-checklist-list dt{font-size:16px;line-height:1.75;font-weight:700;color:var(--ink)}
body.dsk-refined main.yarn-learning-page .yarn-checklist-list dd{max-width:70ch;margin:0;min-width:0}
body.dsk-refined main.yarn-learning-page .yarn-checklist-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:28px}
body.dsk-refined main.yarn-learning-page .yarn-common-questions{padding-top:32px}
body.dsk-refined main.yarn-learning-page .yarn-common-questions details{border-top:1px solid var(--line);padding-block:16px}
body.dsk-refined main.yarn-learning-page .yarn-common-questions summary{min-height:44px;align-content:center;font-size:18px;font-weight:600;cursor:pointer}
body.dsk-refined main.yarn-learning-page .yarn-common-questions details p{max-width:70ch;margin:12px 0 0}
body.dsk-refined main.yarn-learning-page .yarn-references{margin-top:32px}
body.dsk-refined main.yarn-learning-page .yarn-references p{font-size:14px}
body.dsk-refined main.yarn-learning-page .yarn-context-links{padding-block:32px 48px;border-top:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-context-links p{margin:0 0 8px;font-weight:700}
body.dsk-refined main.yarn-learning-page .yarn-context-links>div{display:flex;flex-wrap:wrap;gap:0 28px}
body.dsk-refined main.yarn-learning-page .yarn-context-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--green)}
@media(max-width:900px){body.dsk-refined main.yarn-learning-page .yarn-heading-with-link{align-items:start;flex-direction:column;gap:12px}body.dsk-refined main.yarn-learning-page .yarn-cotton-feature{grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:40px}body.dsk-refined main.yarn-learning-page .yarn-basics-list{gap:28px}}
@media(max-width:760px){body.dsk-refined main.yarn-learning-page{--yarn-section-space:40px}body.dsk-refined main.yarn-learning-page .materials-hero-copy{width:100%;max-width:560px}body.dsk-refined main.yarn-learning-page .materials-hero img.materials-hero-visual{object-position:76% center}body.dsk-refined main.yarn-learning-page .materials-hero::before{background:linear-gradient(90deg,rgba(247,246,242,.95),rgba(247,246,242,.82) 68%,rgba(247,246,242,.6))}body.dsk-refined main.yarn-learning-page .materials-hero>.shell{padding-block:44px}body.dsk-refined main.yarn-learning-page .materials-hero h1{font-size:clamp(38px,8vw,54px)}body.dsk-refined main.yarn-learning-page .materials-hero p{font-size:16px}body.dsk-refined main.yarn-learning-page .yarn-page-nav{column-gap:20px}body.dsk-refined main.yarn-learning-page .yarn-basics-list,body.dsk-refined main.yarn-learning-page .yarn-family-list{grid-template-columns:1fr}body.dsk-refined main.yarn-learning-page .yarn-cotton-feature{grid-template-columns:1fr;gap:28px}body.dsk-refined main.yarn-learning-page .yarn-cotton-figure{max-width:280px}body.dsk-refined main.yarn-learning-page .yarn-reading-list article{grid-template-columns:1fr;gap:12px}body.dsk-refined main.yarn-learning-page .yarn-checklist-list>div{grid-template-columns:1fr;gap:8px}body.dsk-refined main.yarn-learning-page h2{font-size:34px}}


/* Yarn Knowledge overview: real production images connect fibre terms to garment work. */
body.dsk-refined main.yarn-learning-page .yarn-photo-story{border-top:1px solid var(--line)}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figure{min-width:0;margin:0;background:#eceee9}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid img{display:block;width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:cover;object-position:center;margin:0;padding:0;border:0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figure{overflow:hidden}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figure:hover img{transform:scale(1.025)}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figcaption{display:grid;gap:4px;padding:14px 14px 16px;background:var(--paper);font-size:13px;line-height:1.5;color:var(--yarn-copy)}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figcaption strong{font:400 20px/1.2 var(--serif);color:var(--ink)}
body.dsk-refined main.yarn-learning-page .yarn-photo-story-note{margin:16px 0 0;color:var(--muted);font-size:12px}
@media(max-width:900px){body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:520px){body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid{grid-template-columns:1fr;gap:18px}}
@media(prefers-reduced-motion:reduce){body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid img{transition:none}body.dsk-refined main.yarn-learning-page .yarn-photo-story-grid figure:hover img{transform:none}}