:root {
  --linen: #efe9dc;
  --linen-deep: #ddd1bf;
  --ecru: #fffaf0;
  --ink: #252a27;
  --muted: #5f625b;
  --brass: #9d6b36;
  --brass-light: #c99b5d;
  --blue: #365d73;
  --blue-dark: #193f54;
  --rose: #a33f51;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Epilogue', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--brass) #d8cdbc; scrollbar-width: thin; }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; overflow-x: hidden; font-kerning: normal; text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #d8cdbc; }
::-webkit-scrollbar-thumb { border: 3px solid #d8cdbc; border-radius: 10px; background: var(--brass); }
button, input { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(163,63,81,.15); }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
::selection { background: var(--rose); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); background: var(--ink); color: #fff; white-space: nowrap; }
.skip-link:focus-visible { width: auto; height: auto; padding: .75rem 1rem; overflow: visible; clip-path: none; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
.grain { position: fixed; inset: 0; z-index: 50; opacity: .15; pointer-events: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }

.site-header { height: 92px; padding: 0 clamp(24px, 5vw, 78px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(37,42,39,.17); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 20px/1 var(--display); letter-spacing: .01em; }
.brand svg { width: 44px; fill: none; stroke: var(--brass); stroke-width: 1.5; }
.brand small { display: block; margin-bottom: 5px; color: var(--blue); font: 600 8px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.site-nav { display: flex; gap: 32px; }
.site-nav a { position: relative; padding: 12px 0; color: #3f4541; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a::after { content: ''; position: absolute; right: 0; bottom: 7px; left: 0; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; }

.hero { min-height: calc(100svh - 92px); padding: clamp(70px, 10vw, 150px) clamp(24px, 6vw, 94px) 70px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; gap: clamp(30px, 3vw, 62px); position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 77% 42%, rgba(255,255,255,.92) 0 8%, rgba(255,255,255,.46) 25%, transparent 43%), radial-gradient(circle at 10% 100%, rgba(157,107,54,.12), transparent 30%), linear-gradient(105deg,rgba(255,255,255,.34),transparent 32% 70%,rgba(122,86,47,.04)), repeating-linear-gradient(88deg, transparent 0 4px, rgba(103,80,49,.036) 5px, transparent 6px 9px); box-shadow: inset 0 -42px 90px rgba(104,75,42,.06); }
.hero::after { content: ''; position: absolute; z-index: -1; top: 9%; bottom: 8%; left: 52%; width: 1px; background: linear-gradient(transparent, rgba(157,107,54,.45) 18% 82%, transparent); transform: rotate(8deg); transform-origin: center; }
.eyebrow { margin: 0 0 22px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hero h1 { max-width: 790px; margin: 0; font: 400 clamp(76px, 8.8vw, 148px)/.74 var(--display); letter-spacing: -.058em; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 span { white-space: nowrap; }
.hero h1 em { margin-left: clamp(35px, 7vw, 120px); color: var(--rose); font-weight: 400; }
.hero-intro { max-width: 530px; margin: 38px 0 29px; color: #494e49; font-family: var(--display); font-size: clamp(20px, 1.6vw, 25px); line-height: 1.45; }
.hero-intro strong { color: var(--ink); font-style: italic; font-weight: 600; }
.thread-link { display: inline-flex; gap: 42px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--brass); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.thread-link span { color: var(--rose); font-size: 17px; transition: transform .3s; }
.thread-link { transition: color .3s, border-color .3s; }
.thread-link:hover, .thread-link:focus-visible { color: var(--rose); border-color: var(--rose); }
.thread-link:hover span, .thread-link:focus-visible span { transform: translateY(5px); }
.hero-ledger { width: min(100%, 520px); margin-top: clamp(42px, 5vw, 72px); padding-top: 15px; border-top: 1px solid rgba(37,42,39,.18); display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; color: #60645e; font-size: 8px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.hero-ledger span { display: flex; align-items: baseline; gap: 7px; }
.hero-ledger b { color: var(--blue-dark); font: 500 24px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.hero-orbit { justify-self: center; width: min(100%, 570px); position: relative; isolation: isolate; }
.hero-orbit::before { content: ''; position: absolute; z-index: -1; inset: 8%; border: 1px solid rgba(157,107,54,.12); border-radius: 50%; background: radial-gradient(circle at 42% 35%,rgba(255,255,255,.9),rgba(242,235,222,.55) 55%,rgba(205,190,167,.18) 75%,transparent 76%); box-shadow: inset -20px -25px 45px rgba(111,78,43,.06), 0 32px 65px rgba(94,67,39,.06); }
.hero-orbit svg { width: 100%; overflow: visible; transform: rotate(-8deg); filter: drop-shadow(0 24px 35px rgba(100,73,43,.08)); }
.hero-orbit circle { fill: none; stroke: rgba(54,93,115,.32); stroke-width: 1; stroke-dasharray: 2 8; }
.hero-orbit circle:nth-of-type(2) { stroke: rgba(157,107,54,.28); stroke-dasharray: none; }
.orbit-thread { fill: none; stroke: #fdf8ec; stroke-width: 5; filter: drop-shadow(0 3px 2px rgba(58,44,30,.2)); stroke-dasharray: 620; stroke-dashoffset: 620; animation: heroThread 1.6s .65s cubic-bezier(.16,1,.3,1) forwards; }
.orbit-thread.b { stroke: #e4d4bd; }
.orbit-pin path { stroke: var(--brass); stroke-width: 2; }
.orbit-pin circle { fill: var(--brass-light); stroke: #7f5225; stroke-width: 4; filter: drop-shadow(0 6px 4px rgba(51,34,21,.28)); }
.hero-orbit text { fill: var(--blue); font: 600 9px var(--body); letter-spacing: .22em; }
.hero-note { position: absolute; inset: 50% auto auto 50%; display: flex; align-items: center; gap: 12px; transform: translate(-50%,-50%); }
.hero-note b { color: var(--rose); font: 400 74px/1 var(--display); }
.hero-note span { color: var(--muted); font-size: 9px; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
.orbit-annotation { position: absolute; right: -2%; bottom: 12%; width: 155px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; color: var(--rose); font: italic 500 25px var(--display); transform: rotate(-8deg); }
.orbit-annotation i { height: 1px; background: var(--brass); }
.orbit-annotation small { grid-column: 1/-1; color: var(--blue); font: 650 7px var(--body); letter-spacing: .18em; text-align: right; text-transform: uppercase; }
.hero-side-note { position: absolute; top: 50%; right: 20px; margin: 0; color: rgba(54,93,115,.56); font-size: 7px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; transform: translateY(-50%); }
.hero-index { position: absolute; bottom: 22px; right: clamp(24px, 5vw, 78px); color: rgba(37,42,39,.18); font: 400 42px/1 var(--display); }
.hero-index span { font-size: 17px; }
.reveal { opacity: 0; transform: translateY(22px); animation: reveal .85s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1.reveal { animation-delay: .12s; }
.hero-intro.reveal { animation-delay: .25s; }
.thread-link.reveal { animation-delay: .38s; }
.hero-ledger.reveal { animation-delay: .5s; }
.hero-orbit.reveal { animation-delay: .32s; transform: scale(.94); animation-name: revealOrbit; }
@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes revealOrbit { to { opacity: 1; transform: scale(1); } }
@keyframes heroThread { to { stroke-dashoffset: 0; } }

.pillow-section { padding: clamp(90px, 11vw, 170px) clamp(20px, 5vw, 80px); background: #222926; color: var(--linen); position: relative; overflow: hidden; }
.pillow-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 30%, rgba(201,155,93,.11), transparent 27%), radial-gradient(circle at 18% 84%, rgba(54,93,115,.22), transparent 33%), repeating-linear-gradient(112deg, transparent 0 11px, rgba(255,255,255,.13) 12px, transparent 13px 20px); }
.pillow-section::after { content: 'CROSS  /  TWIST  /  PIN  /  TENSION'; position: absolute; right: -2rem; bottom: 1rem; color: rgba(239,233,220,.045); font: 500 clamp(50px,8vw,120px)/1 var(--display); white-space: nowrap; }
.section-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr .8fr; gap: 5vw; max-width: 1210px; margin: 0 auto 60px; }
.section-heading .eyebrow { grid-column: 1/-1; color: #9bb2bd; margin-bottom: -14px; }
.section-heading h2, .grammar h2, .practice-copy h2, .pricking-heading h2, .spangles h2, .essay h2 { margin: 0; font: 400 clamp(58px, 7vw, 110px)/.88 var(--display); letter-spacing: -.045em; }
.section-heading h2 i, .grammar h2 em, .practice-copy h2 i, .pricking-heading h2 i, .spangles h2 i, .essay h2 i { color: var(--rose); font-weight: 400; }
.section-heading > p:last-child { align-self: end; max-width: 400px; margin: 0 0 7px; color: #c3c4bd; font-family: var(--display); font-size: 20px; line-height: 1.45; }
.lace-lab { max-width: 1290px; margin: auto; position: relative; z-index: 1; box-shadow: 0 45px 90px rgba(4,11,9,.38); }
.pattern-tabs { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(239,233,220,.2); border-bottom: 0; }
.pattern-tab { min-height: 82px; padding: 12px 20px; border: 0; border-right: 1px solid rgba(239,233,220,.2); background: rgba(12,17,15,.25); color: #d0d2cb; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 13px; text-align: left; text-transform: uppercase; transition: background-color .3s, color .3s; }
.pattern-tab:last-child { border-right: 0; }
.pattern-tab span { grid-row: 1/3; align-self: center; color: #858f89; font-size: 9px; }
.pattern-tab b { font-size: 11px; font-weight: 650; letter-spacing: .09em; }
.pattern-tab small { color: #7f8983; font-size: 7px; font-weight: 600; letter-spacing: .12em; }
.pattern-tab:hover, .pattern-tab.is-active { background: var(--linen); color: var(--ink); }
.pattern-tab.is-active span { color: var(--rose); }
.pillow-wrap { aspect-ratio: 1.85; min-height: 0; background: var(--linen); overflow: hidden; position: relative; }
.pillow-seam { position: absolute; z-index: 1; inset: 2.2%; border: 1px dashed rgba(93,68,41,.3); border-radius: 50%; pointer-events: none; }
.pattern-register { position: absolute; z-index: 2; top: 5%; left: 5%; display: grid; padding-left: 13px; border-left: 2px solid var(--rose); }
.pattern-register span { color: var(--brass); font-size: 7px; font-weight: 700; letter-spacing: .14em; }
.pattern-register b { font: 500 21px/1.15 var(--display); }
.pattern-register small { color: #696a62; font-size: 8px; }
.lace-svg { display: block; width: 100%; height: 100%; }
.pattern-lines path { fill: none; stroke: #4b6f85; stroke-width: 1.2; opacity: .22; stroke-dasharray: 3 8; }
.pin-layer line { stroke: #795128; stroke-width: 1.3; }
.pin-layer circle.pin-head { fill: var(--brass-light); stroke: #704921; stroke-width: 2; filter: url(#pinShadow); }
.pin-layer circle.pin-hole { fill: #826949; opacity: .4; }
.thread-layer path { fill: none; stroke: #fffdf4; stroke-width: 3; stroke-linecap: round; }
.thread-layer path:nth-child(even) { stroke: #e7d9c4; }
.thread-layer path.rose-thread { stroke: #b84e60; }
.bobbin-body { fill: url(#bobbinWood); stroke: #70431f; stroke-width: 1.2; }
.bobbin-thread { fill: #e9ddca; stroke: #8e765b; }
.bobbin-ring { fill: none; stroke-width: 5; }
.move-readout { position: absolute; left: 5%; bottom: 6%; z-index: 3; width: min(390px,42%); min-height: 122px; padding: 20px 25px 17px 94px; background: rgba(239,233,220,.91); color: var(--ink); backdrop-filter: blur(8px); box-shadow: 0 18px 36px rgba(60,45,31,.16); }
.move-readout .move-count { display: block; color: var(--blue); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.move-readout > i { position: absolute; left: 20px; top: 18px; color: rgba(163,63,81,.18); font: italic 500 77px/.9 var(--display); }
.move-readout strong { display: block; color: var(--rose); font: 600 34px/1.1 var(--display); letter-spacing: .05em; }
.move-readout p { margin: 3px 0 0; color: #575a53; font-size: 10px; }
.pillow-stamp { position: absolute; right: 6%; bottom: 7%; width: 72px; height: 72px; border: 1px solid rgba(157,107,54,.5); border-radius: 50%; display: grid; place-content: center; color: rgba(157,107,54,.7); text-align: center; font: 600 23px/1 var(--display); transform: rotate(-9deg); }
.pillow-stamp small { display: block; font: 600 6px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.lab-controls { display: grid; grid-template-columns: 1fr 160px 180px 100px; align-items: stretch; background: #151b18; }
.speed-control { padding: 22px 32px 20px; border-right: 1px solid rgba(239,233,220,.16); }
.speed-control label { display: flex; justify-content: space-between; margin-bottom: 13px; color: #d2d2cb; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.speed-control output { color: #d29a64; }
input[type=range] { width: 100%; height: 2px; accent-color: var(--rose); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #747b77; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.pause-button { border: 0; border-right: 1px solid rgba(239,233,220,.16); background: none; color: var(--linen); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 80px; }
.pause-icon { color: var(--rose); font-size: 17px; }
.pause-copy { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.step-button { min-height: 80px; padding: 0 18px; border: 0; border-right: 1px solid rgba(239,233,220,.16); background: transparent; color: var(--linen); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.step-button span:first-child { color: var(--brass-light); font-size: 17px; }
.step-button span:last-child { font-size: 8px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.pause-button:hover, .step-button:hover { background: rgba(239,233,220,.06); }
.stitch-tally { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7f8782; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.stitch-tally strong { color: var(--linen); font: 400 33px/1 var(--display); }

.grammar { padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 9vw, 150px); position: relative; }
.grammar::after { content: 'C / T'; position: absolute; right: 0; top: 8%; color: rgba(54,93,115,.06); font: 500 clamp(130px, 23vw, 360px)/1 var(--display); letter-spacing: -.08em; pointer-events: none; }
.grammar-intro { position: sticky; top: 50px; align-self: start; z-index: 1; }
.grammar h2 { font-size: clamp(58px, 6.5vw, 100px); }
.grammar-intro > p:last-child { max-width: 510px; margin-top: 32px; color: #535851; font-family: var(--display); font-size: 21px; }
.move-cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.move-card { min-height: 490px; padding: 25px; border: 1px solid rgba(37,42,39,.18); display: flex; flex-direction: column; position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.32),transparent 50%); box-shadow: 0 24px 40px rgba(72,53,33,.06); transition: border-color .35s, box-shadow .35s, transform .5s cubic-bezier(.16,1,.3,1); }
.move-card:hover, .move-card:focus-within { border-color: rgba(163,63,81,.6); box-shadow: 0 30px 55px rgba(72,53,33,.12); }
.move-card.is-pressed { transform: translateY(4px); }
.cross-card { margin-top: 88px; }
.move-card h3 { margin: auto 0 0; font: 500 60px/1 var(--display); }
.move-card p { margin: 2px 0 24px; font: italic 20px var(--display); }
.move-card small { padding-top: 17px; border-top: 1px solid rgba(37,42,39,.17); color: var(--blue); font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.compose-trigger { position: absolute; z-index: 3; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.compose-trigger:focus-visible { outline-offset: -8px; }
.move-no { position: absolute; right: 22px; top: 15px; color: rgba(54,93,115,.18); font: 400 67px var(--display); }
.move-diagram { height: 255px; position: relative; }
.move-diagram i { position: absolute; top: 12px; left: 35%; width: 2px; height: 228px; background: #fffdf4; box-shadow: 0 1px 3px #765; transform-origin: top; }
.move-diagram i:nth-child(2) { left: 65%; background: #d7c4a9; }
.cross-card .move-diagram i:first-child { transform: rotate(-20deg); }
.cross-card .move-diagram i:nth-child(2) { transform: rotate(20deg); }
.twist-card .move-diagram i:first-child { transform: rotate(12deg); }
.twist-card .move-diagram i:nth-child(2) { transform: rotate(-12deg); }
.bobbin-mini { position: absolute; bottom: 0; width: 26px; height: 108px; border-radius: 50% 50% 30% 30%; background: linear-gradient(90deg,#855026,#d1a064 45%,#78431e); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.bobbin-mini::after { content: ''; position: absolute; left: -8px; bottom: -12px; width: 40px; height: 14px; border: 2px solid var(--brass); border-radius: 50%; }
.bobbin-mini.b1 { left: calc(35% - 12px); }
.bobbin-mini.b2 { left: calc(65% - 12px); }
.cross-card:hover .bobbin-mini.b1, .cross-card:focus-within .bobbin-mini.b1 { animation: crossOne 1.4s ease-in-out infinite alternate; }
.cross-card:hover .bobbin-mini.b2, .cross-card:focus-within .bobbin-mini.b2 { animation: crossTwo 1.4s ease-in-out infinite alternate; }
.twist-card:hover .bobbin-mini, .twist-card:focus-within .bobbin-mini { animation: twistBobbin 1s ease-in-out infinite alternate; }
@keyframes crossOne { to { transform: translateX(75px) rotate(6deg); } }
@keyframes crossTwo { to { transform: translateX(-75px) rotate(-6deg); } }
@keyframes twistBobbin { to { transform: rotate(12deg) translateY(-7px); } }
.move-cards blockquote { grid-column: 1/-1; width: 88%; margin: -30px 0 0 auto; padding: 58px 10% 54px; background: linear-gradient(135deg,#2b566d,var(--blue)); color: var(--linen); box-shadow: -20px 22px 0 rgba(54,93,115,.09); }
.move-cards blockquote p { margin: 0; font: italic 400 clamp(30px,3.2vw,50px)/1.1 var(--display); }
.move-cards cite { display: block; margin-top: 20px; color: #b7c8d0; font-size: 8px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

.thread-memory { grid-column: 1/-1; min-height: 390px; margin-top: 42px; border: 1px solid rgba(37,42,39,.22); display: grid; grid-template-columns: minmax(250px,.62fr) minmax(430px,1.38fr); background: linear-gradient(118deg,rgba(255,255,255,.4),rgba(226,215,197,.3)); position: relative; overflow: hidden; box-shadow: 24px 28px 0 rgba(157,107,54,.07); }
.thread-memory::before { content: 'THREAD MEMORY  /  LS–88'; position: absolute; right: 18px; top: 12px; color: rgba(54,93,115,.22); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.memory-copy { padding: 45px 34px 35px; border-right: 1px solid rgba(37,42,39,.16); display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; }
.memory-kicker { color: var(--rose); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.memory-copy h3 { margin: 16px 0 10px; font: 500 clamp(42px,4vw,61px)/.88 var(--display); letter-spacing: -.035em; }
.memory-copy h3 i { color: var(--rose); font-weight: 400; }
.memory-copy p { max-width: 330px; margin: 0; color: #4f5650; font: 400 17px/1.45 var(--display); }
.memory-sequence { display: block; margin-top: auto; padding: 15px 0 9px; color: var(--blue-dark); font-size: 10px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.memory-clear { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--brass); background: transparent; color: var(--ink); cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .25s, border-color .25s; }
.memory-clear:hover, .memory-clear:focus-visible { color: var(--rose); border-color: var(--rose); }
.memory-clear:disabled { opacity: .35; cursor: default; }
.memory-sampler { min-width: 0; padding: 45px 20px 28px; display: grid; align-content: center; position: relative; background: radial-gradient(circle at 76% 50%,rgba(255,255,255,.7),transparent 33%), repeating-linear-gradient(90deg,transparent 0 17px,rgba(157,107,54,.035) 18px,transparent 19px 28px); }
.memory-sampler svg { width: 100%; overflow: visible; filter: drop-shadow(0 9px 12px rgba(80,55,31,.12)); }
.memory-axis { fill: none; stroke: rgba(54,93,115,.23); stroke-width: 1; stroke-dasharray: 3 8; }
.memory-ghost { opacity: .24; transition: opacity .5s; }
.memory-ghost path { fill: none; stroke: var(--blue); stroke-width: 1.1; stroke-dasharray: 2 7; }
.memory-ghost circle { fill: var(--brass); }
.thread-memory.has-moves .memory-ghost { opacity: .065; }
.memory-thread { fill: none; stroke: #fffdf4; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 2px 1.5px rgba(67,48,29,.35)); stroke-dasharray: 1200; animation: memoryDraw .82s cubic-bezier(.16,1,.3,1) both; }
.memory-thread.thread-2 { stroke: #dac8ae; stroke-width: 4.5; }
.memory-pin line { stroke: var(--brass); stroke-width: 1.5; }
.memory-pin circle { fill: var(--brass-light); stroke: #795027; stroke-width: 2; filter: drop-shadow(0 4px 3px rgba(58,39,22,.25)); }
.memory-pin text { fill: var(--rose); font: italic 600 15px var(--display); }
.memory-seal { opacity: .15; transform-box: fill-box; transform-origin: center; transition: opacity .7s, transform .9s cubic-bezier(.16,1,.3,1); }
.memory-seal circle { fill: var(--rose); }
.memory-seal path { fill: none; stroke: #fff8eb; stroke-width: 2; }
.thread-memory.is-complete .memory-seal { opacity: 1; transform: rotate(360deg) scale(1.08); }
.thread-memory.is-complete { border-color: rgba(163,63,81,.5); }
.memory-edge-note { justify-self: end; color: var(--blue); font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
@keyframes memoryDraw { from { stroke-dashoffset: 1200; opacity: .35; } to { stroke-dashoffset: 0; opacity: 1; } }

.your-turn { padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 94px); background: radial-gradient(circle at 77% 50%, rgba(255,255,255,.68), transparent 23%), linear-gradient(125deg,#cad9de,#e3e7e4 58%,#c9d9dd); display: grid; grid-template-columns: minmax(300px,.7fr) minmax(500px,1.3fr); gap: clamp(40px,7vw,110px); align-items: center; position: relative; overflow: hidden; }
.your-turn::before { content: ''; position: absolute; width: 380px; height: 380px; border: 1px dashed rgba(54,93,115,.23); border-radius: 50%; left: -190px; top: -170px; }
.practice-copy { position: relative; z-index: 2; }
.practice-copy > p:nth-of-type(2) { margin: 27px 0; color: #465158; font-family: var(--display); font-size: 21px; }
.sequence { display: flex; gap: 7px; margin: 31px 0 22px; }
.sequence span { width: 40px; height: 40px; border: 1px solid rgba(25,63,84,.3); display: grid; place-items: center; color: #56666d; font: 600 17px var(--display); transition: transform .3s, background-color .3s, color .3s, box-shadow .3s; }
.sequence .is-current { background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-5px); box-shadow: 0 5px 0 rgba(25,63,84,.2); }
.sequence .is-done { background: var(--blue-dark); color: #fff; }
.practice-status { min-height: 54px; padding: 15px 17px; border-left: 3px solid var(--rose); background: rgba(255,255,255,.35); color: #3e494e; font-size: 11px; }
.practice-status b { color: var(--ink); }
.practice-status.is-error { animation: softShake .45s ease; }
@keyframes softShake { 30%{transform:translateX(5px)} 60%{transform:translateX(-3px)} }
.text-button { min-height: 44px; margin-top: 15px; padding: 0; border: 0; border-bottom: 1px solid var(--brass); background: transparent; color: var(--ink); cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.practice-board { aspect-ratio: 1.28; min-height: 480px; position: relative; }
.practice-board::before, .practice-board::after { content: ''; position: absolute; z-index: 0; inset: 9% 7%; border: 1px dashed rgba(54,93,115,.2); border-radius: 50%; pointer-events: none; }
.practice-board::after { inset: 18% 15%; border-style: solid; opacity: .45; }
.practice-board > svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 25px rgba(25,63,84,.17)); }
.practice-tension { position: absolute; z-index: 3; top: 11%; right: 10%; display: grid; text-align: right; color: var(--blue-dark); }
.practice-tension span { font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.practice-tension b { color: var(--rose); font: 500 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.practice-pricking path { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 4 9; opacity: .42; }
.practice-pricking circle { fill: var(--brass); }
.practice-pricking .red-pin { fill: var(--rose); stroke: #fff1e9; stroke-width: 3; }
#practice-threads path { fill: none; stroke: #fffdf4; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(72,52,35,.3)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: stitchIn .65s ease forwards; }
#practice-threads path.unravelling { stroke: var(--rose); stroke-width: 3; animation: unravelThread .72s cubic-bezier(.5,0,.8,.2) forwards; }
@keyframes stitchIn { to { stroke-dashoffset: 0; } }
@keyframes unravelThread { 0% { stroke-dashoffset: 0; opacity: .8; } 70% { opacity: .7; } 100% { stroke-dashoffset: 600; opacity: 0; } }
.pair-buttons { position: absolute; inset: 0; }
.pair-buttons button { position: absolute; bottom: 2%; width: 29%; min-height: 105px; border: 0; background: transparent; cursor: pointer; }
.pair-buttons button:nth-child(1) { left: 4%; }
.pair-buttons button:nth-child(2) { left: 35.5%; }
.pair-buttons button:nth-child(3) { right: 4%; }
.pair-buttons span { display: block; margin-bottom: 5px; color: var(--blue-dark); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pair-buttons i { display: inline-block; width: 24px; height: 85px; margin: 0 5px; border-radius: 45% 45% 28% 28%; background: linear-gradient(90deg,#82502a,#d5a66e 45%,#74421f); box-shadow: 0 5px 7px rgba(70,45,27,.22); transition: transform .25s; }
.pair-buttons button:hover i:first-of-type, .pair-buttons button:focus-visible i:first-of-type { transform: translate(-6px,-5px) rotate(7deg); }
.pair-buttons button:hover i:last-of-type, .pair-buttons button:focus-visible i:last-of-type { transform: translate(6px,-5px) rotate(-7deg); }
.pair-buttons button.is-wrong i { animation: unravel .6s ease; }
.pair-buttons button:disabled { cursor: default; opacity: .72; }
@keyframes unravel { 30%{transform:translateY(12px) rotate(8deg)} 60%{transform:translateY(-2px) rotate(-4deg)} }
.practice-board.is-complete .red-pin { animation: rosePin 1.4s cubic-bezier(.16,1,.3,1) both; transform-box: fill-box; transform-origin: center; }
.practice-board.is-complete::after { border-color: var(--rose); opacity: .65; transform: scale(1.06); transition: transform .8s cubic-bezier(.16,1,.3,1), border-color .8s, opacity .8s; }
@keyframes rosePin { 40% { transform: scale(2.4); fill: #d77a8b; } 100% { transform: scale(1.45); fill: var(--rose); } }

.prickings { padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 110px); background: radial-gradient(circle at 70% 30%,#26556d 0,transparent 32%), linear-gradient(145deg,#12384b,var(--blue-dark) 64%,#0f3243); color: var(--linen); display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(50px, 7vw, 110px); position: relative; overflow: hidden; }
.prickings::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle, #e9bb72 0 1px, transparent 1.5px); background-size: 46px 46px; mask-image: linear-gradient(90deg,transparent,#000 45%,#000); }
.pricking-heading { align-self: center; }
.pricking-heading .eyebrow { color: #a7bdc7; }
.pricking-heading h2 { font-size: clamp(56px, 6vw, 94px); }
.pricking-heading h2 i { color: #e0939f; }
.pricking-heading > p:last-child { color: #bdc9cd; font-family: var(--display); font-size: 20px; }
.star-chart { aspect-ratio: 1.5; border: 1px solid rgba(239,233,220,.18); position: relative; background: #244e64; box-shadow: 22px 25px 0 rgba(7,26,35,.25); }
.star-chart svg { width: 100%; height: 100%; display: block; }
.star-chart .star { fill: #e4b66f; cursor: pointer; transition: r .25s, fill .25s; }
.star-chart .star:hover, .star-chart .star.active { fill: #ee9aac; }
.star-chart .star:focus-visible { outline: none; stroke: #fff9ed; stroke-width: 4; }
.star-chart .constellation { fill: none; stroke: rgba(239,233,220,.45); stroke-width: 1; stroke-dasharray: 5 8; }
.star-chart .trace { fill: none; stroke: #fff9ed; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1200; animation: trace 1.7s ease both; }
@keyframes trace { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
.chart-key { position: absolute; left: 24px; right: 24px; bottom: 20px; padding: 15px 18px; background: rgba(20,54,72,.86); display: grid; grid-template-columns: .6fr 1fr; backdrop-filter: blur(6px); }
.chart-key span { color: #9db4bf; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.chart-key b { font: 500 18px var(--display); }
.chart-key small { grid-column: 1/-1; color: #d2dde1; font-size: 9px; }
.chart-key output { grid-column: 1/-1; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(239,233,220,.18); color: #efbac2; font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.pattern-notes { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 25px; border-top: 1px solid rgba(239,233,220,.18); }
.pattern-notes article { padding: 34px 30px 0; border-right: 1px solid rgba(239,233,220,.18); position: relative; }
.pattern-notes article:last-child { border-right: 0; }
.pattern-notes span { position: absolute; right: 30px; color: #e0939f; font: italic 25px var(--display); }
.pattern-notes h3 { margin: 0; font: 500 32px var(--display); }
.pattern-notes p { margin: 4px 0 0; color: #aebdc3; font-size: 10px; }

.spangles { padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .63fr 1.37fr; gap: 7vw; background: radial-gradient(circle at 80% 40%,rgba(255,255,255,.65),transparent 26%), linear-gradient(115deg,#e3d7c5,#eee7da 62%,#d8c6ae); }
.spangle-title-wrap { align-self: center; }
.spangle-title-wrap > p:last-child { max-width: 410px; margin-top: 25px; color: #525751; font-family: var(--display); font-size: 20px; }
.cabinet { display: grid; grid-template-columns: repeat(3,1fr); border: 10px solid #755034; outline: 1px solid #4b321f; box-shadow: inset 0 0 40px rgba(51,31,17,.4), 18px 24px 35px rgba(63,42,24,.17); background: #be9872; }
.spangle-card { min-height: 500px; padding: 30px 20px 20px; border-right: 5px ridge #96704e; display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse at center, #cfad88 0 55%, #a47a56 100%); }
.spangle-card:last-child { border-right: 0; }
.spangle-card:nth-child(2) { transform: translateY(-22px); }
.bobbin-specimen { flex: 1; width: 70px; position: relative; }
.bobbin-specimen::before { content: ''; position: absolute; top: 25px; left: 21px; width: 28px; height: 300px; border-radius: 50% 50% 22% 22%; background: linear-gradient(90deg,#613918,#bd8447 27%,#e0b270 50%,#865124 78%,#4d2e14); box-shadow: 6px 8px 8px rgba(45,26,12,.22); }
.bobbin-specimen span { position: absolute; top: 103px; left: 16px; z-index: 1; width: 39px; height: 70px; border-radius: 7px; background: repeating-linear-gradient(0deg,#eee1cb 0 2px,#c9b394 3px 4px); }
.bobbin-specimen i { position: absolute; left: 3px; bottom: 18px; width: 66px; height: 47px; border: 3px solid var(--brass); border-radius: 50%; }
.bobbin-specimen i::before, .bobbin-specimen i::after { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%; top: 14px; background: var(--blue); box-shadow: 18px -12px 0 #e8ddd1, 36px 0 0 var(--blue), 18px 12px 0 var(--rose); }
.bobbin-specimen i::before { left: 2px; }
.bobbin-specimen i::after { display: none; }
.spangle-card:hover .bobbin-specimen { animation: cabinetSway 1.2s cubic-bezier(.34,1.56,.64,1); transform-origin: 50% 8%; }
@keyframes cabinetSway { 35% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } }
.s2 .bobbin-specimen i::before { background: #221d1e; box-shadow: 18px -12px 0 var(--rose),36px 0 0 #221d1e,18px 12px 0 var(--rose); }
.s3 .bobbin-specimen i::before { background: #c39349; box-shadow: 18px -12px 0 #e3bd79,36px 0 0 #c39349,18px 12px 0 #e3bd79; }
.spangle-card p { width: 100%; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid rgba(57,36,20,.28); color: #45301f; font: 500 16px/1.35 var(--display); }
.spangle-card p b { display: block; color: #68411f; font: 700 8px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.spangle-card small { color: #654d39; font: 500 7px var(--body); letter-spacing: .05em; }

.binary { min-height: 950px; padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .5fr 1.15fr .35fr; gap: 5vw; background: #f4eee3; position: relative; overflow: hidden; }
.binary-code { writing-mode: vertical-rl; color: rgba(54,93,115,.2); font: 500 clamp(25px,3vw,48px)/1.8 var(--display); }
.binary-code span { margin-left: 25px; }
.essay { max-width: 760px; }
.essay h2 { margin-bottom: 50px; font-size: clamp(61px,7vw,106px); }
.algorithm-strip { margin: -22px 0 42px; padding: 12px 0; border-top: 1px solid rgba(157,107,54,.35); border-bottom: 1px solid rgba(157,107,54,.35); display: grid; grid-template-columns: repeat(8,auto); align-items: center; justify-content: space-between; color: var(--blue-dark); }
.algorithm-strip span { font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.algorithm-strip i { color: var(--rose); font: italic 500 21px var(--display); }
.essay > p:not(.eyebrow) { color: #454b46; font-family: var(--display); font-size: clamp(19px,1.6vw,23px); line-height: 1.55; }
.essay .dropcap::first-letter { float: left; margin: -.15em .1em -.15em 0; color: var(--rose); font: 500 6.8em/1 var(--display); }
.room-link { display: flex; justify-content: space-between; align-items: center; margin-top: 47px; padding: 21px 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); color: var(--blue-dark); text-decoration: none; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.room-link { transition: padding .35s cubic-bezier(.16,1,.3,1), color .25s, background-color .25s; }
.room-link:hover, .room-link:focus-visible { padding-inline: 14px; background: rgba(157,107,54,.08); color: var(--rose); }
.room-link span { color: var(--rose); font-family: var(--display); font-size: 21px; }
.margin-note { align-self: center; padding: 25px 0 25px 18px; border-left: 1px solid var(--rose); color: #62655e; font: italic 17px/1.5 var(--display); }
.margin-note span { display: block; margin-bottom: 10px; color: var(--rose); font: 700 7px var(--body); letter-spacing: .14em; text-transform: uppercase; }

.closing { min-height: 650px; padding: 80px 24px; background: radial-gradient(circle at 50% 32%,#bd5366 0,transparent 32%), linear-gradient(145deg,#963549,#ad4055 55%,#8f3044); color: #fff9ee; display: grid; place-content: center; text-align: center; position: relative; overflow: hidden; }
.closing svg { position: absolute; top: 8%; left: 0; width: 100%; opacity: .23; }
.closing svg path { fill: none; stroke: #fff7e9; stroke-width: 2; }
.closing p { position: relative; max-width: 1180px; margin: 0 auto; font: 400 clamp(68px, 9vw, 132px)/.79 var(--display); letter-spacing: -.045em; }
.closing p em { font-weight: 300; }
.closing-proof { position: relative; justify-self: center; margin-top: 34px; color: #f0bcc5; font-size: 8px; font-weight: 650; letter-spacing: .2em; }
.closing a { position: relative; justify-self: center; margin-top: 55px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.5); text-decoration: none; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: letter-spacing .35s, border-color .35s; }
.closing a:hover, .closing a:focus-visible { letter-spacing: .18em; border-color: #fff; }

.site-footer { min-height: 250px; padding: 50px clamp(24px, 6vw, 94px); background: #202624; color: #bbbdb6; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.footer-mark { display: flex; align-items: center; gap: 18px; color: var(--linen); font: 500 26px var(--display); }
.footer-mark svg { width: 52px; fill: none; stroke: var(--brass-light); stroke-width: 1.4; }
.footer-mark small { display: block; color: #a8ada8; font: 500 8px var(--body); letter-spacing: .13em; text-transform: uppercase; }
.site-footer > p { grid-row: 2; margin: 0; color: #d0d2cd; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.site-footer nav { grid-column: 2; grid-row: 1/3; display: flex; gap: 24px; }
.site-footer nav a { min-height: 44px; display: flex; align-items: center; color: #d0d2cd; text-decoration: none; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.site-footer nav a { position: relative; transition: color .25s; }
.site-footer nav a::after { content: ''; position: absolute; right: 0; bottom: 7px; left: 0; height: 1px; background: var(--brass-light); transform: scaleX(0); transition: transform .3s; transform-origin: right; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--linen); }
.site-footer nav a:hover::after, .site-footer nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr .8fr; }
  .hero h1 { font-size: clamp(70px, 10vw, 96px); }
  .hero-side-note { display: none; }
  .grammar { grid-template-columns: 1fr; }
  .grammar-intro { position: relative; top: auto; }
  .your-turn { grid-template-columns: 1fr; }
  .practice-copy { max-width: 650px; }
  .practice-board { width: min(100%,760px); justify-self: center; }
  .prickings, .spangles { grid-template-columns: 1fr; }
  .pricking-heading, .spangle-title-wrap { max-width: 650px; }
  .binary { grid-template-columns: .25fr 1fr; }
  .margin-note { grid-column: 2; max-width: 450px; }
  .cabinet { min-height: 530px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .hero { min-height: 850px; padding-top: 120px; padding-bottom: 85px; align-items: start; }
  .hero-orbit { align-self: center; margin-top: 58px; }
  .hero-ledger { grid-template-columns: 1fr; width: 175px; gap: 5px; }
  .pillow-wrap { aspect-ratio: 1.72; }
  .lab-controls { grid-template-columns: 1fr 130px 150px 85px; }
}

@media (max-width: 700px) {
  .site-header { height: 76px; padding-inline: 18px; }
  .brand { font-size: 18px; }
  .brand svg { width: 38px; }
  .nav-toggle { width: 48px; height: 48px; border: 0; background: transparent; display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .nav-toggle > span:not(.sr-only) { width: 25px; height: 1px; background: var(--ink); transition: transform .25s, opacity .25s; }
  .nav-toggle[aria-expanded=true] > span:first-child { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded=true] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: 76px; padding: 14px 18px 20px; background: var(--linen); border-bottom: 1px solid rgba(37,42,39,.2); display: none; flex-direction: column; gap: 0; }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(37,42,39,.1); }
  .hero { min-height: auto; padding: 58px 20px 68px; display: block; }
  .hero::after { top: 44%; bottom: 7%; left: 51%; opacity: .55; }
  .hero h1 { font-size: clamp(67px, 22vw, 88px); line-height: .76; }
  .hero h1 em { margin-left: 27px; }
  .hero-intro { margin-top: 32px; font-size: 20px; }
  .hero-orbit { width: 85vw; margin: 45px auto 0; }
  .hero-orbit svg { overflow: hidden; }
  .hero-orbit text { display: none; }
  .hero-index { bottom: 22px; }
  .hero-ledger { margin-top: 43px; gap: 6px; }
  .hero-ledger span { display: grid; gap: 0; }
  .hero-ledger b { font-size: 20px; }
  .orbit-annotation { right: -1%; bottom: 5%; width: 125px; }
  .section-heading { display: block; margin-bottom: 38px; }
  .section-heading h2, .grammar h2, .practice-copy h2, .pricking-heading h2, .spangles h2, .essay h2 { font-size: 58px; }
  .section-heading > p:last-child { margin-top: 24px; font-size: 18px; }
  .pillow-section { padding-inline: 13px; }
  .pattern-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; }
  .pattern-tab { min-width: 0; min-height: 78px; padding: 9px 8px; grid-template-columns: 1fr; gap: 1px; text-align: center; }
  .pattern-tab span { grid-row: auto; font-size: 7px; }
  .pattern-tab b { font-size: 8px; line-height: 1.25; }
  .pattern-tab small { font-size: 6px; letter-spacing: .06em; }
  .pillow-wrap { aspect-ratio: auto; min-height: 510px; }
  .lace-svg { width: 100%; height: 390px; transform: none; }
  .pattern-register { top: 4%; left: 5%; }
  .pattern-register b { font-size: 18px; }
  .pattern-register small { max-width: 175px; }
  .move-readout { left: 16px; right: 16px; bottom: 14px; width: auto; min-height: 108px; padding: 16px 16px 14px 74px; }
  .move-readout > i { left: 17px; top: 19px; font-size: 60px; }
  .move-readout strong { font-size: 27px; }
  .move-readout p { white-space: normal; }
  .pillow-stamp { display: none; }
  .lab-controls { grid-template-columns: 1fr 74px 74px; }
  .speed-control { padding-inline: 18px; }
  .pause-button { border-right: 0; }
  .pause-copy { display: none; }
  .step-button { border-left: 1px solid rgba(239,233,220,.16); border-right: 0; padding: 0; }
  .step-button span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .stitch-tally { display: none; }
  .grammar { padding-inline: 20px; }
  .move-cards { grid-template-columns: 1fr; }
  .move-card { min-height: 440px; }
  .cross-card { margin-top: 0; }
  .thread-memory { min-height: 0; grid-template-columns: 1fr; margin-top: 18px; }
  .memory-copy { min-height: 340px; border-right: 0; border-bottom: 1px solid rgba(37,42,39,.16); padding: 38px 26px 28px; }
  .memory-copy h3 { font-size: 50px; }
  .memory-sampler { min-height: 230px; padding: 30px 9px 22px; }
  .memory-edge-note { margin-right: 12px; }
  .move-cards blockquote { width: calc(100% - 18px); margin-top: 8px; padding-inline: 28px; }
  .your-turn { padding-inline: 20px; }
  .practice-copy, .practice-board { width: 100%; min-width: 0; }
  .practice-board { min-height: 0; aspect-ratio: 1.05; }
  .sequence { gap: 5px; }
  .sequence span { width: 36px; height: 36px; }
  .pair-buttons button { min-height: 85px; }
  .pair-buttons span { font-size: 6px; }
  .pair-buttons i { width: 18px; height: 66px; margin-inline: 2px; }
  .practice-tension { top: 12%; right: 8%; }
  .prickings { padding-inline: 20px; }
  .star-chart { aspect-ratio: 1; }
  .star-chart svg { height: 75%; }
  .chart-key { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
  .chart-key b { font-size: 17px; }
  .pattern-notes { grid-template-columns: 1fr; }
  .pattern-notes article { min-height: 116px; border-right: 0; border-bottom: 1px solid rgba(239,233,220,.18); }
  .spangles { padding-inline: 16px; }
  .cabinet { grid-template-columns: 1fr; }
  .spangle-card { min-height: 430px; border-right: 0; border-bottom: 5px ridge #96704e; }
  .spangle-card:last-child { border-bottom: 0; }
  .spangle-card:nth-child(2) { transform: none; }
  .bobbin-specimen::before { height: 244px; }
  .binary { min-height: auto; padding-inline: 20px; display: block; }
  .binary-code { display: none; }
  .essay h2 { margin-bottom: 35px; }
  .algorithm-strip { grid-template-columns: repeat(4,1fr); row-gap: 8px; margin-top: -10px; }
  .margin-note { margin-top: 45px; }
  .room-link { gap: 25px; }
  .closing { min-height: 510px; }
  .closing p { max-width: 350px; font-size: clamp(56px,17vw,72px); line-height: .83; }
  .site-footer { padding: 46px 24px; }
  .site-footer nav { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .orbit-thread { stroke-dashoffset: 0; }
}