/* Wild Little Designs, v2 (2026-10-19): "the page is a bolt of cloth".
   Calm rules: one linen ground, ink type, hairlines instead of heavy borders, soft shadows only,
   one accent (madder) for buying, and at most one moving pattern area on screen (the cloth).
   Motion rules: colour never tweens in GSAP (CSS transitions do it), images sit in fixed boxes,
   display type is never covered by media or canvas, and everything reads finished under reduced motion. */
:root {
  --ground: #E6DDCF; --ground-2: #DED4C4; --paper: #F0EADF; --well: #EAE2D5;
  --ink: #2B2520; --ink-2: #5B5148; --line: rgba(43, 37, 32, .14); --line-2: rgba(43, 37, 32, .26);
  --accent: #8C3B28; --accent-d: #6F2D1E; --night: #26211D; --on-night: #EDE5D7;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 56px); --max: 1320px;
  --ease: cubic-bezier(.22, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16.5px/1.65 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
em { font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main { position: relative; z-index: 1; }

.kicker { font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; }
.h2 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 300; letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.h2 em { color: var(--accent); }
.h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; }

/* buttons: quiet pills, colour eased by CSS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 24px; border-radius: 999px;
  font: 500 15px/1 var(--sans); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--ground); }
.btn-ink:hover { background: #463c34; border-color: #463c34; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink); background: rgba(255, 255, 255, .25); }
.btn-buy { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-buy:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.link-more { display: inline-flex; gap: .45em; align-items: center; font: 500 15px/1.2 var(--sans); text-decoration: none; padding: 10px 0;
  border-bottom: 1px solid var(--line-2); transition: border-color .3s, color .3s; }
.link-more:hover { border-color: var(--ink); }
.link-more span { transition: transform .35s var(--ease); }
.link-more:hover span { transform: translateX(4px); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 22px; min-height: 64px; padding: 10px var(--gut);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
body:not(.home) .nav, .nav.is-solid { background: rgba(230, 221, 207, .9); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav.is-hidden { transform: translateY(calc(-100% - 2px)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 18px/1 var(--serif); letter-spacing: -.005em; }
.brand img { border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 11px; border-radius: 999px; text-decoration: none; font-size: 14.5px; white-space: nowrap; color: var(--ink-2); transition: color .25s, background-color .25s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); background: rgba(43, 37, 32, .06); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; position: relative; cursor: pointer; }
.nav-toggle span:not(.sr) { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .3s; }
.nav-toggle span:nth-child(1) { top: 18px; } .nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--ground); padding: 92px var(--gut) 40px; overflow: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font: 300 clamp(26px, 7vw, 36px)/1.1 var(--serif); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-sw { width: 34px; height: 34px; border-radius: 50%; background-size: 52px; flex: none; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 1320px) { .nav-sec { display: none; } }
@media (max-width: 760px) { .nav nav, .nav-etsy { display: none; } .nav-toggle { display: block; } }

/* hero: a small ink wordmark above the bolt */
.hero { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(104px, 15vh, 150px) var(--gut) clamp(30px, 5vh, 52px); text-align: center; }
.wordmark { margin: 0; font-weight: 300; }
.wm { display: block; font: 300 clamp(44px, 5.2vw, 78px)/1 var(--serif); letter-spacing: -.025em; font-variation-settings: "opsz" 144; }
.wm em { font-weight: 300; }
.hero-sub { display: block; margin-top: 14px; font: 400 clamp(17px, 1.45vw, 20px)/1.4 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.hero-lede { max-width: 37em; margin: 16px auto 26px; color: var(--ink-2); font-size: 15.5px; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- the bolt ---------- */
.bolt {
  --cw: clamp(330px, 34vw, 540px);       /* cloth width */
  --ts: 300px;                           /* one pattern tile on the cloth */
  --pw: clamp(92px, 26%, 148px);         /* patch size */
  --pts: 124px;                          /* one pattern tile on a patch */
  --sh: clamp(680px, 96vh, 1000px);      /* length of one stretch */
  position: relative;
}
.stretch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--cw) minmax(0, 1fr); column-gap: clamp(28px, 4.4vw, 76px);
  padding: 0 var(--gut); min-height: var(--sh); }
.stretch.is-first { min-height: calc(var(--sh) + 30vh); }
.stretch-cloth { grid-column: 2; grid-row: 1; position: relative; background-color: var(--avg); background-image: linear-gradient(rgb(230 221 207 / .12) 0 0), var(--tile);
  background-size: var(--ts) var(--ts); background-position: var(--off-x) var(--off-y);
  filter: saturate(.86); }   /* decorative cloth only, to match the WebGL bolt; product photos are never filtered */
.stretch-copy { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: min(100%, 360px); margin-top: clamp(70px, 13vh, 130px); text-align: right; }
.is-first .stretch-copy { margin-top: calc(30vh + clamp(70px, 13vh, 130px)); }
.is-flip .stretch-copy { grid-column: 3; justify-self: start; text-align: left; }
.stretch-n { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin: 0 0 14px; font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.stretch-n span { font: 400 15px/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.stretch-n span::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--line-2); }
.is-flip .stretch-n { justify-content: flex-start; }
.stretch-h { font: 300 clamp(34px, 3.3vw, 50px)/1.04 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.stretch-h a { text-decoration: none; }
.stretch-lede { margin: 14px 0 10px; color: var(--ink-2); }

/* the swing tag: tied to the cloth edge with a thread */
.tag { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; position: relative; margin-top: calc(var(--sh) * .5);
  display: grid; gap: 3px; min-width: 200px; max-width: 250px; padding: 15px 20px 15px 36px; transform-origin: 0 50%;
  filter: drop-shadow(0 6px 10px rgba(43, 37, 32, .14)); }
.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(50% + 14px), 0 calc(50% - 14px)); }
.tag::after { content: ""; position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 1px 1px rgba(43, 37, 32, .35); }
.tag-thread { position: absolute; top: 50%; right: calc(100% - 18px); width: calc(clamp(28px, 4.4vw, 76px) + 22px); height: 1px; background: var(--ink-2); opacity: .55; pointer-events: none; }
.tag-k { font: 500 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.tag-name { font: 400 19px/1.2 var(--serif); text-decoration: none; }
.tag-name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tag-meta { font-size: 13.5px; color: var(--ink-2); }
.is-flip .tag { grid-column: 1; justify-self: end; transform-origin: 100% 50%; padding: 15px 36px 15px 20px; text-align: right; }
.is-flip .tag::before { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% calc(50% - 14px), 100% calc(50% + 14px), calc(100% - 16px) 100%, 0 100%); }
.is-flip .tag::after { left: auto; right: 14px; }
.is-flip .tag-thread { right: auto; left: calc(100% - 18px); }

/* static, finished fabric: seams, patches and pinked ends (the no-JS / reduced-motion / no-WebGL picture) */
.stretch + .stretch .stretch-cloth { box-shadow: inset 0 3px 3px -2px rgba(25, 18, 12, .38); }
.stretch + .stretch .stretch-cloth::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px dashed var(--thread); opacity: .9; }
.is-first .stretch-cloth {
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 7.5px / 100% calc(100% - 7.5px) no-repeat;
          mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 7.5px / 100% calc(100% - 7.5px) no-repeat; }
.is-last .stretch-cloth {
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7.5px) no-repeat;
          mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7.5px) no-repeat; }
.patch { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: var(--pw); aspect-ratio: 1; translate: -50% -50%; rotate: var(--rot);
  background-color: var(--pavg); background-image: var(--ptile); background-size: var(--pts) var(--pts); border-radius: 4px;
  box-shadow: 0 1px 1px rgba(20, 14, 10, .3), 0 6px 12px -4px rgba(20, 14, 10, .4); }
.patch::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--pthread); border-radius: 2px; }
.patch.is-circle, .patch.is-circle::after { border-radius: 50%; }
/* WebGL draws the cloth in exactly these boxes, so the static picture steps aside (and its tiles are never fetched) */
.gl .stretch-cloth, .gl .patch { background: none !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; }
.gl .stretch-cloth::before, .gl .patch::after { content: none !important; }   /* !important: .stretch + .stretch beats .gl on specificity */
.bolt-canvas { position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none; }

.bolt-cue { display: none; }
.gl .bolt-cue { position: absolute; z-index: 2; top: 34px; right: calc(50% + var(--cw) / 2 + clamp(28px, 4.4vw, 76px)); display: flex; align-items: center; gap: 12px; margin: 0;
  font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); transition: opacity .6s; }
.gl .bolt-cue span { width: 1px; height: 38px; background: var(--accent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.bolt-cue.is-gone { opacity: 0; }

.bolt-end { position: relative; max-width: 760px; margin: 0 auto; padding: 190px var(--gut) 60px; text-align: center; }
.bolt-end .h2 { margin-bottom: 14px; }
.bolt-end-p { color: var(--ink-2); margin: 0 auto 26px; max-width: 32em; }

@media (max-width: 899px) {
  .bolt { --cw: 41vw; --ts: 150px; --pw: 36%; --pts: 84px; --sh: clamp(560px, 84vh, 760px); }
  .stretch { grid-template-columns: minmax(0, 1fr) var(--cw); grid-template-rows: auto 1fr; column-gap: 16px; padding: 0 0 0 var(--gut); }
  .stretch.is-first { min-height: calc(var(--sh) + 22vh); }
  .stretch-cloth { grid-column: 2; grid-row: 1 / span 2; }
  .stretch-copy, .is-flip .stretch-copy { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; width: 100%; margin-top: clamp(56px, 10vh, 96px); }
  .is-first .stretch-copy { margin-top: calc(22vh + clamp(56px, 10vh, 96px)); }
  .stretch-n, .is-flip .stretch-n { justify-content: flex-start; }
  .stretch-h { font-size: clamp(27px, 7.4vw, 34px); }
  .stretch-lede { font-size: 15px; line-height: 1.55; }
  .tag, .is-flip .tag { grid-column: 1; grid-row: 2; justify-self: end; margin: 30px 0 0; min-width: 0; max-width: 100%; width: calc(100% + 4px);
    padding: 13px 34px 13px 16px; text-align: right; transform-origin: 100% 50%; }
  .tag::before, .is-flip .tag::before { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% calc(50% - 14px), 100% calc(50% + 14px), calc(100% - 16px) 100%, 0 100%); }
  .tag::after, .is-flip .tag::after { left: auto; right: 13px; }
  .tag-thread, .is-flip .tag-thread { right: auto; left: calc(100% - 16px); width: 34px; }
  .tag-name { font-size: 17px; }
  .gl .bolt-cue { right: auto; left: var(--gut); top: 26px; }
  .bolt-end { padding-top: 150px; }
}

/* ---------- sections + cards ---------- */
.feat, .specs, .how, .faq, .catalogue, .related, .col-copy { max-width: var(--max); margin: 0 auto; padding: 90px var(--gut); }
.feat { padding-top: 70px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 44px 28px; }
.card { position: relative; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--well); box-shadow: 0 0 0 1px var(--line);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.card-media img { width: 100%; height: 100%; object-fit: contain; }   /* 68 of 69 covers are 4:3 and fill the box; the square one is shown whole */
.card:hover .card-media { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 22px 36px -22px rgba(43, 37, 32, .55); }
.card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding-top: 16px; }
.card-sec { margin: 0; font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.card-name { font: 400 22px/1.15 var(--serif); letter-spacing: -.01em; }
.card-name a { text-decoration: none; }
.card-name a::after { content: ""; position: absolute; inset: 0 0 52px; }
.card-phrase { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 2; }
.card-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line); }
.price { font: 400 19px/1 var(--serif); font-variant-numeric: tabular-nums; }
.card-buy { display: inline-flex; gap: .35em; align-items: center; min-height: 40px; font: 500 14px/1 var(--sans); color: var(--accent); text-decoration: none; }
.card-buy:hover { text-decoration: underline; text-underline-offset: 3px; }

.specs { padding-block: 70px; }
.specs-h { margin-bottom: 30px; }
.specs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.specs-list li { display: grid; gap: 6px; padding: 26px 22px 6px; border-left: 1px solid var(--line); }
.specs-list li:first-child { padding-left: 0; border-left: 0; }
.num { font: 300 clamp(40px, 4.4vw, 62px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.lbl { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 760px) { .specs-list { grid-template-columns: 1fr 1fr; } .specs-list li, .specs-list li:first-child { padding: 22px 0 14px; border-left: 0; border-bottom: 1px solid var(--line); } .specs-list li:nth-child(even) { padding-left: 16px; } }

.how-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.how-steps li { padding: 28px 28px 8px 0; }
.how-steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.how-steps h3 { font-size: 25px; font-weight: 400; margin: 14px 0 8px; }
.how-steps p { margin: 0; color: var(--ink-2); }
.how-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); font: 400 17px/1 var(--serif); }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; } .how-steps li, .how-steps li + li { padding: 24px 0 8px; border-left: 0; border-bottom: 1px solid var(--line); } }

.faq { max-width: 980px; }
.faq h2 { margin-bottom: 20px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font: 400 clamp(19px, 2vw, 23px)/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { margin: 0 0 22px; max-width: 46em; color: var(--ink-2); }

/* ---------- page heads ---------- */
.page-head { max-width: var(--max); margin: 0 auto; padding: 132px var(--gut) 34px; }
.page-head.has-sample { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(28px, 5vw, 80px); }
.crumbs { font-size: 13.5px; color: var(--ink-2); margin-bottom: 20px; }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.crumbs a:hover { border-color: var(--ink); }
.page-h1 { font: 300 clamp(40px, 5.6vw, 80px)/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 144; max-width: 14ch; }
.page-lede { max-width: 36em; font-size: 18px; color: var(--ink-2); margin: 18px 0 0; }
.sample { width: clamp(150px, 15vw, 200px); rotate: 2deg; margin-bottom: 6px; }
.sample-cloth { display: block; aspect-ratio: 4 / 5; background-color: var(--avg); background-image: var(--tile); background-size: 150px 150px;
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 10px 7px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6.5px) no-repeat;
          mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 10px 7px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6.5px) no-repeat;
  filter: drop-shadow(0 8px 14px rgba(43, 37, 32, .22)); }
.sample-cap { display: block; margin-top: 12px; font: italic 400 16px/1.3 var(--serif); color: var(--ink-2); }
.sample-cap span { display: block; margin-bottom: 4px; font: normal 500 10.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 760px) { .page-head { padding-top: 104px; } .page-head.has-sample { display: block; } .sample { display: none; } }

/* ---------- catalogue tools ---------- */
.catalogue { padding-top: 26px; }
.filters { position: sticky; top: 64px; z-index: 10; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 10px;
  border-image: linear-gradient(to top, var(--line) 1px, var(--ground) 1px) fill 0 / 0 / 0 100vmax; transition: top .5s var(--ease); }   /* full-bleed bar, no overflow */
.nav.is-hidden ~ main .filters { top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer; font-size: 14px; transition: background-color .3s, color .3s, border-color .3s; }
.fchip:hover { border-color: var(--ink); }
.fchip span { opacity: .6; font-size: 13px; }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.tools { display: flex; gap: 10px; flex-wrap: wrap; }
.search input, .sort select { font: inherit; font-size: 15px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink); min-width: 0; }
.search input { width: 250px; max-width: 100%; }
.count { color: var(--ink-2); font-size: 14px; margin: 8px 0 24px; }
.empty { font: 400 24px/1.3 var(--serif); padding: 40px 0; }
@media (max-width: 760px) { .filters { position: static; box-shadow: none; } .chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; width: 100%; } .fchip { flex: none; scroll-snap-align: start; } .tools, .search, .search input, .sort, .sort select { width: 100%; } }
.col-copy { padding-top: 10px; max-width: 900px; } .col-copy p { font-size: 17px; color: var(--ink-2); }
.col-others a { color: var(--accent); }

/* ---------- pattern page ---------- */
.pat { max-width: var(--max); margin: 0 auto; padding: 100px var(--gut) 40px; }
.pat-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4.4vw, 68px); align-items: start; }
.gallery-main { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px var(--line); aspect-ratio: 4 / 3; }
.gallery-main img, .gallery-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* the whole image, never cropped */
.thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.thumb { width: 84px; height: 63px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: var(--well); box-shadow: 0 0 0 1px var(--line); opacity: .78; transition: opacity .3s, box-shadow .3s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-on, .thumb:hover { opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); }
.thumb-video { display: grid; place-items: center; background: var(--ink); color: var(--ground); font-size: 18px; }
.gallery { position: sticky; top: 92px; }   /* the cover stays in view while the details scroll */
.pat-h1 { font: 300 clamp(36px, 3.8vw, 56px)/1.04 var(--serif); letter-spacing: -.025em; font-variation-settings: "opsz" 144; }
.pat-h1-sub { display: block; margin-top: 12px; font: 400 16px/1.45 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.pat-price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 18px; }
.pat-price .price { font-size: 34px; }
.pat-cur { color: var(--ink-2); font-size: 14px; }
.pat-inc-h { margin: 26px 0 0; font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.pat-specs { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 8px; font-size: 15px; }
.pat-specs li { position: relative; padding-left: 22px; }
.pat-specs li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; border-top: 1.5px dashed var(--accent); }
.repeat { border-radius: 4px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.repeat-view { height: 220px; --ts: 180px; background-image: var(--tile); background-size: var(--ts) var(--ts); background-position: center; }
.repeat-ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px 0; font-size: 14px; }
.repeat-ctl label { display: flex; align-items: center; gap: 10px; }
.repeat-ctl input[type=range] { accent-color: var(--accent); width: 140px; }
.repeat-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.repeat-sw button { width: 30px; height: 30px; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px var(--line-2); background-size: 50px; cursor: pointer; padding: 0; }
.repeat-sw button.is-on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.repeat-cap { margin: 8px 14px 12px; font-size: 13px; color: var(--ink-2); }
.pat-desc { max-width: 780px; padding: 76px 0 10px; }
.pat-desc h3 { font-size: 21px; margin: 28px 0 8px; }
.pat-desc p, .pat-desc li { color: var(--ink-2); }
.tags { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink-2); }
.related { padding-inline: 0; }
.related .h2 { margin-bottom: 28px; }
.buybar { position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translate(-50%, 160%); display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 22px;
  background: var(--night); color: var(--on-night); border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); transition: transform .6s var(--ease); max-width: calc(100% - 32px); }
.buybar.is-on { transform: translate(-50%, 0); }
.buybar-name { font: 400 17px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.buybar .price { color: #E7CFA0; }
@media (max-width: 900px) {
  .pat-grid { grid-template-columns: 1fr; } .gallery { position: static; } .pat { padding-top: 88px; }
  .buybar { left: 16px; right: 16px; transform: translateY(160%); justify-content: space-between; } .buybar.is-on { transform: none; }
  .thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .thumb-video { display: grid; }
}
/* phones: two cards a row, so the catalogue is a browse, not a long scroll */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .card-body { padding-top: 12px; gap: 3px; }
  .card-sec { font-size: 9.5px; letter-spacing: .12em; }
  .card-name { font-size: 17.5px; }
  .card-phrase { font-size: 12.5px; }
  .card-foot { flex-wrap: wrap; gap: 0 10px; padding-top: 8px; }
  .card-foot .price { font-size: 17px; }
  .card-buy { font-size: 13.5px; min-height: 36px; }
}

/* ---------- guides + licence: a reading column, hairlines, the accent only for links ---------- */
.guide-hub, .home-guides, .guide-more, .lic { max-width: var(--max); margin: 0 auto; padding: 40px var(--gut) 90px; }
.lic { padding-bottom: 0; }
.home-guides { padding-block: 90px 10px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 56px 36px; }
.guide-item { display: flex; flex-direction: column; gap: 18px; }
.guide-item-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--well); box-shadow: 0 0 0 1px var(--line); }
.guide-item-media img { width: 100%; height: 100%; object-fit: contain; }
.guide-item-h { font: 400 clamp(23px, 2.1vw, 29px)/1.15 var(--serif); letter-spacing: -.01em; }
.guide-item-h a { text-decoration: none; }
.guide-item-h a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.guide-item-copy p { margin: 10px 0 4px; color: var(--ink-2); }
.guide-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.guide-links li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 40px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.guide-links a { font: 400 clamp(19px, 1.8vw, 23px)/1.3 var(--serif); text-decoration: none; }
.guide-links a:hover { color: var(--accent); }
.guide-links span { color: var(--ink-2); font-size: 15.5px; }
.guide-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 5vw, 72px); align-items: end; }
.guide-h1 { max-width: 20ch; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.05; }
.guide-date { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
.guide-hero { margin: 0; }
.guide-hero img { width: 100%; height: auto; border-radius: 4px; background: var(--well); box-shadow: 0 0 0 1px var(--line); }
.guide-hero figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.guide-body { max-width: var(--max); margin: 0 auto; padding: 56px var(--gut) 30px; display: grid; grid-template-columns: minmax(0, 720px); gap: clamp(32px, 5vw, 72px); }
.guide-body.has-toc { grid-template-columns: 230px minmax(0, 720px); }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14.5px; }
.toc-h { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; border-left: 1px solid var(--line-2); }
.toc a { display: block; padding-left: 14px; text-decoration: none; color: var(--ink-2); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.prose { font-size: 17.5px; line-height: 1.72; }
.prose section + section { margin-top: 48px; }
.prose h2 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; scroll-margin-top: 96px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 1.3em; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent); }
.prose a, .lic a, .faq details a, .col-copy p a, .guide-rel-secs a, .guide-hero figcaption a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tip { margin: 26px 0; padding: 18px 22px; background: var(--paper); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; }
.tip p { margin: 0; font-size: 16px; }
.tip-label { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
.guide-faq { max-width: none; margin: 56px 0 0; padding: 0; }   /* the article's last section, in the reading column */
.guide-faq h2 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 6px; scroll-margin-top: 96px; }
.faq-left { max-width: var(--max); }
.faq-left > * { max-width: 980px; }
.guide-rel, .gone-alts { padding-inline: var(--gut); }   /* .related drops its side padding inside .pat; on its own it needs it */
.guide-rel .sec-head { align-items: baseline; }
.guide-rel-secs { margin: 0; color: var(--ink-2); }
.guide-more { padding-top: 10px; }
.guide-more h2 { margin-bottom: 18px; }
.lic-h1 { max-width: 18ch; }
.lic-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lic-col { padding: 28px 30px 14px; border-radius: 4px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.lic-col h2, .lic-more h2 { margin-bottom: 16px; }
.lic-col ul, .lic-more ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-2); }
.lic-col li, .lic-more li { position: relative; padding-left: 26px; }
.lic-col li::before, .lic-more li::before { position: absolute; left: 0; top: 0; font-weight: 600; }
.lic-yes li::before { content: "✓"; color: #4C6B3C; }
.lic-no li::before { content: "✕"; color: var(--accent); }
.lic-more li::before { content: "·"; color: var(--ink); left: 6px; }
.lic-more { max-width: 820px; margin-top: 48px; }
.lic-note { margin: 36px 0 0; color: var(--ink-2); }
@media (max-width: 960px) { .guide-body, .guide-body.has-toc { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
@media (max-width: 899px) { .guide-head { grid-template-columns: minmax(0, 1fr); } .guide-hero { max-width: 520px; } }
@media (max-width: 760px) { .guide-links li { grid-template-columns: minmax(0, 1fr); } .lic-cols { grid-template-columns: minmax(0, 1fr); } .lic-col { padding: 22px 20px 8px; } .prose { font-size: 16.5px; } }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; background: var(--night); color: var(--on-night); padding: 0 var(--gut) 34px; }
.foot a:focus-visible { outline-color: #E7CFA0; }
.foot-cta { max-width: var(--max); margin: 0 auto; padding: 96px 0 64px; border-bottom: 1px solid rgba(237, 229, 215, .16); }
.foot-kicker { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(237, 229, 215, .7); margin: 0 0 18px; }
.foot-big { display: inline-flex; align-items: baseline; gap: .3em; font: 300 clamp(40px, 6.4vw, 92px)/1 var(--serif); letter-spacing: -.03em; text-decoration: none; font-variation-settings: "opsz" 144; }
.foot-big span { display: inline-block; font-size: .6em; transition: transform .5s var(--ease); }
.foot-big:hover span { transform: translateX(10px); }
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 30px; padding: 44px 0; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; opacity: .82; } .foot-grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid p { margin: 0; opacity: .8; max-width: 30em; }
.foot-brand { font: 400 24px/1.1 var(--serif) !important; opacity: 1 !important; margin-bottom: 12px !important; }
.foot-h { font: 500 11px/1 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; opacity: .7 !important; margin-bottom: 16px !important; }
.foot-legal { max-width: var(--max); margin: 0 auto; font-size: 12.5px; opacity: .6; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- small screens: hero ---------- */
@media (max-width: 899px) {
  .hero { text-align: left; padding-top: 100px; padding-bottom: 30px; }
  .wm { font-size: clamp(40px, 11vw, 56px); }
  .hero-lede { margin-left: 0; font-size: 15px; }
  .hero-cta { justify-content: flex-start; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* JS off or reduced motion: everything visible and finished */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}