:root {
  --cream: #f3ecdf;
  --paper: #fbf8f2;
  --ink: #282726;
  --muted: #6d675f;
  --rust: #9a4f36;
  --rust-dark: #713725;
  --navy: #263847;
  --moss: #65715c;
  --gold: #b99253;
  --line: rgba(40, 39, 38, .16);
  --shadow: 0 22px 60px rgba(53, 41, 28, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(185,146,83,.11), transparent 28%),
    linear-gradient(180deg, var(--paper), #eee5d7 70%, #e7ddce);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.4rem; letter-spacing: .04em; }
.brand-tag { margin-top: 7px; font-family: Arial, sans-serif; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
nav { display: flex; gap: 24px; font-family: Arial, sans-serif; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; }
nav a { text-decoration: none; position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--rust); transition: right .25s ease; }
nav a:hover::after { right: 0; }

.hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 710px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 40px;
  position: relative;
}

.eyebrow {
  font-family: Arial, sans-serif;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust-dark);
  font-weight: 700;
}

h1, h2, h3 { font-weight: 500; margin-top: 0; }
h1 { font-size: clamp(3.2rem, 7vw, 6.3rem); line-height: .97; letter-spacing: -.045em; margin-bottom: 28px; }
h1 em { color: var(--rust); font-weight: 400; }
.lede { max-width: 690px; font-size: 1.15rem; color: var(--muted); }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.button { text-decoration: none; padding: 13px 19px; border-radius: 999px; font-family: Arial, sans-serif; font-size: .83rem; letter-spacing: .05em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: white; background: var(--rust); }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.35); }

.hero-art { min-height: 520px; position: relative; }
.book-stack { position: absolute; left: 11%; right: 8%; top: 18%; z-index: 4; transform: rotate(-2deg); }
.book {
  height: 112px; margin: 0 auto 14px; border-radius: 6px 12px 12px 6px;
  box-shadow: 0 15px 28px rgba(35,28,20,.18), inset 0 -8px 0 rgba(0,0,0,.08);
  position: relative; display: flex; align-items: center; justify-content: center;
  color: #f5eee1; font-size: 1.05rem; letter-spacing: .08em;
}
.book::before { content:""; position:absolute; left: 17px; top:0; bottom:0; width:1px; background: rgba(255,255,255,.22); }
.book::after { content:""; position:absolute; right: 12px; top: 10px; bottom: 10px; width: 18px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0)); border-radius: 0 8px 8px 0; }
.book-a { width: 76%; background: linear-gradient(135deg, #8c4631, #a95e42); transform: translateX(-4%); }
.book-b { width: 86%; background: linear-gradient(135deg, #263847, #385166); transform: translateX(3%); }
.book-c { width: 71%; background: linear-gradient(135deg, #5d6b57, #7c8a70); transform: translateX(-2%); }

.yarn-ball {
  width: 175px; height: 175px; border-radius: 50%; position: absolute; z-index: 6;
  right: 0; bottom: 12%; transform: rotate(8deg);
  background: repeating-linear-gradient(18deg, #c69f65 0 6px, #b98d4f 6px 11px, #d0ad76 11px 16px);
  box-shadow: 0 20px 38px rgba(55,42,25,.2), inset -14px -12px 20px rgba(71,51,25,.12);
}
.yarn-line { position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; }
.y2 { inset: 35px 12px; transform: rotate(58deg); }
.y3 { inset: 12px 42px; transform: rotate(-35deg); }
.y4 { inset: 28px 24px; transform: rotate(95deg); }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 7; }
.thread path { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 5px 4px rgba(0,0,0,.08)); stroke-dasharray: 15 2; }

.interlude {
  background: var(--navy); color: #f6f2ea; padding: 34px 20px; text-align: center;
  font-size: clamp(1.2rem, 2.2vw, 2rem); font-style: italic; box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.interlude p { margin: 0 auto; max-width: 1000px; }

.section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0; }
.section-heading { max-width: 690px; margin-bottom: 50px; }
.section-heading h2, .about-copy h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 20px; }
.section-heading p, .about-copy p { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.card { background: rgba(255,255,255,.52); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 16px 38px rgba(59,44,30,.07); backdrop-filter: blur(5px); }
.card h3 { margin: 22px 0 8px; font-size: 1.4rem; }
.card p { color: var(--muted); margin-bottom: 0; }
.mini-book { width: 110px; height: 148px; border-radius: 4px 10px 10px 4px; color: white; display:flex; align-items:center; justify-content:center; box-shadow: 9px 11px 18px rgba(0,0,0,.12); transform: rotate(-3deg); }
.mini-book span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; font-size: .78rem; text-transform: uppercase; font-family: Arial, sans-serif; }
.mini-book.rust { background: var(--rust); }
.mini-book.navy { background: var(--navy); transform: rotate(2deg); }
.mini-book.moss { background: var(--moss); transform: rotate(-1deg); }

.yarn-section {
  width: 100%; max-width: none; padding: 110px max(20px, calc((100vw - 1180px)/2));
  background: linear-gradient(135deg, #5e6658, #4f5a4b); color: #f4efe7; position: relative; overflow: hidden;
}
.yarn-section .section-heading { position: relative; z-index: 2; }
.yarn-section .section-heading p { color: #d9d9cf; }
.yarn-section .eyebrow { color: #e7c999; }
.yarn-ribbon { position: absolute; width: 130%; height: 170px; left: -10%; top: 40%; border: 8px solid rgba(221,187,130,.48); border-color: rgba(221,187,130,.48) transparent transparent transparent; border-radius: 50%; transform: rotate(-5deg); }
.yarn-ribbon::after { content:""; position:absolute; width: 85%; height: 120px; left: 11%; top: 42px; border: 5px solid rgba(221,187,130,.26); border-color: transparent transparent rgba(221,187,130,.26) transparent; border-radius: 50%; }
.yarn-facts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid rgba(255,255,255,.18); }
.yarn-facts div { min-height: 180px; padding: 25px; background: rgba(255,255,255,.05); display:flex; flex-direction:column; justify-content:space-between; }
.yarn-facts strong { font-size: 2.4rem; font-weight: 400; color: #e7c999; }
.yarn-facts span { font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

.woven-section { display:grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items:center; }
.woven-visual { min-height: 480px; position: relative; border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.15)); border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden; }
.spine { position:absolute; width: 54%; height: 54px; left: 18%; border-radius: 4px 12px 12px 4px; box-shadow: 7px 10px 18px rgba(0,0,0,.10); }
.s1 { top: 18%; background: var(--rust); transform: rotate(-7deg); }
.s2 { top: 35%; background: var(--navy); transform: rotate(5deg); left: 25%; }
.s3 { top: 52%; background: var(--moss); transform: rotate(-3deg); left: 16%; }
.s4 { top: 69%; background: #9f7b4d; transform: rotate(7deg); left: 23%; }
.cross-thread { position:absolute; height: 16px; background: linear-gradient(90deg,#c8a36a,#d7b880); border-radius:999px; opacity:.92; box-shadow:0 5px 10px rgba(0,0,0,.08); }
.t1 { width: 78%; left: 7%; top: 32%; transform: rotate(36deg); }
.t2 { width: 74%; left: 13%; top: 50%; transform: rotate(-31deg); }
.t3 { width: 85%; left: 6%; top: 61%; transform: rotate(24deg); }
.about-copy { max-width: 620px; }

footer { border-top: 1px solid var(--line); padding: 34px 20px 60px; text-align:center; color: var(--muted); font-size: .88rem; }

.page-stream { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.page {
  position: absolute; top: -16vh; width: 88px; height: 118px;
  background: linear-gradient(145deg, #fffdf8, #efe9de);
  border: 1px solid rgba(63,50,38,.14); border-radius: 3px 7px 7px 3px;
  box-shadow: 0 10px 26px rgba(53,41,28,.10); opacity: 0;
}
.page::before, .page::after { content:""; position:absolute; left:14px; right:14px; height:1px; background:rgba(55,45,35,.14); box-shadow: 0 10px rgba(55,45,35,.12), 0 20px rgba(55,45,35,.12), 0 30px rgba(55,45,35,.10), 0 40px rgba(55,45,35,.08); top: 23px; }
.page::after { top: 73px; right:30px; box-shadow: 0 9px rgba(55,45,35,.08); }
.p1 { left: 7%; animation: drift 14s linear infinite 0s; }
.p2 { left: 24%; animation: drift 18s linear infinite 4s; transform: scale(.8); }
.p3 { left: 43%; animation: drift 16s linear infinite 8s; transform: scale(.65); }
.p4 { left: 61%; animation: drift 20s linear infinite 1s; transform: scale(.9); }
.p5 { left: 79%; animation: drift 17s linear infinite 10s; transform: scale(.72); }
.p6 { left: 91%; animation: drift 21s linear infinite 6s; transform: scale(.55); }

@keyframes drift {
  0% { transform: translate3d(-20px,-15vh,0) rotate(-8deg) scale(var(--s,1)); opacity:0; }
  8% { opacity:.16; }
  35% { transform: translate3d(75px,35vh,0) rotate(13deg) scale(var(--s,1)); }
  62% { transform: translate3d(-35px,72vh,0) rotate(-18deg) scale(var(--s,1)); }
  92% { opacity:.12; }
  100% { transform: translate3d(65px,118vh,0) rotate(22deg) scale(var(--s,1)); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page { animation: none !important; display:none; }
  .button { transition:none; }
}

@media (max-width: 900px) {
  .site-header { align-items:flex-start; }
  nav { gap:14px; flex-wrap:wrap; justify-content:flex-end; }
  .hero { grid-template-columns:1fr; padding:70px 0; }
  .hero-art { min-height:430px; }
  .cards { grid-template-columns:1fr; }
  .yarn-facts { grid-template-columns:1fr 1fr; }
  .woven-section { grid-template-columns:1fr; gap:50px; }
}

@media (max-width: 600px) {
  .site-header { flex-direction:column; }
  nav { justify-content:flex-start; }
  h1 { font-size:3.25rem; }
  .hero { min-height:auto; }
  .hero-art { min-height:390px; }
  .book { height:90px; font-size:.85rem; }
  .yarn-ball { width:130px; height:130px; }
  .yarn-facts { grid-template-columns:1fr; }
  .section, .yarn-section { padding-top:80px; padding-bottom:80px; }
}