/* The Library hub (crosstela.com/library/), built by site/tools/library_hub.py. Sits on library-pages.css (swatches, tokens
   from site.css) and reads only those tokens, so blush and night both work. A swatch colour arrives as --c through
   CSSOM (library-pages.js); the CSP allows no style="". The home page's own look: filled tiles on the ground, one
   accent, the display face for names, pictures that are the real thing. */

.hub{--gut:clamp(16px,2.4vw,28px);--hr:clamp(16px,2vw,24px);margin-top:clamp(20px,3vw,30px)}
.hub-sec{margin-top:clamp(32px,4.6vw,56px)}
.hub-h{margin:0 0 14px;font-family:var(--display);font-weight:var(--display-w);letter-spacing:calc(var(--track) * .55);
  font-size:clamp(22px,2.6vw,28px);line-height:1.15;color:var(--ink)}
.hub-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hub-head .hub-h{margin:0}
.hub-all,.hub .more{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent);font-weight:650;font-size:15px;text-decoration:none;white-space:nowrap}
.hub-all:hover,.hub .more:hover{text-decoration:underline;text-underline-offset:3px}
.hub .go{width:18px;height:18px;flex:none}
.cats .tile .more{margin-top:auto}

/* ---------- Search ---------- */
.hub-find{position:relative}
.hub-search{margin:0}
.hub-field{display:flex;align-items:center;gap:12px;height:60px;padding:0 22px;max-width:760px;border-radius:999px;background:var(--tile);
  box-shadow:var(--shadow),0 0 0 1px var(--rule);transition:box-shadow .2s}
.hub-field:focus-within{box-shadow:var(--shadow),0 0 0 2.5px var(--accent)}
.hub-field svg{width:22px;height:22px;flex:none;color:var(--accent)}
.hub-field input{flex:1;min-width:0;height:56px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:18px;outline:0;
  -webkit-appearance:none;appearance:none}
.hub-field input::placeholder{color:var(--muted)}
.hub-quick{display:flex;gap:8px;list-style:none;margin:12px calc(-1 * var(--gut)) 0;padding:2px var(--gut);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hub-quick::-webkit-scrollbar{display:none}
.hub-quick a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;background:var(--accent-soft);color:var(--ink);
  font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s}
.hub-quick a:hover{background:var(--accent);color:var(--on-accent)}
@media (min-width:1000px){.hub-quick{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}

.hub-results{margin-top:14px;max-width:760px;padding:8px;border-radius:22px;background:var(--tile);box-shadow:var(--shadow),0 0 0 1px var(--rule)}
.hub-results[hidden]{display:none}
.hub-results .rh{margin:12px 12px 4px;font:650 12px/1.2 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hub-results ul{list-style:none;margin:0;padding:0}
.hub-results li{position:relative}
.hub-results .r{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;line-height:1.3}
.hub-results .r:hover,.hub-results .r:focus-visible{background:var(--accent-soft)}
.hub-results .r>span{min-width:0;overflow-wrap:anywhere}
.hub-results .r small{display:block;margin-top:1px;font-weight:500;font-size:13.5px;color:var(--muted)}
.hub-results .th{width:38px;height:47px;flex:none;border-radius:7px;object-fit:cover;background:var(--cloth)}
.hub-results .sw{width:34px;height:34px;margin:0;border-radius:10px}
.hub-results .ic{width:34px;height:34px;flex:none;padding:7px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.hub-results .code .r{padding-right:92px}
.hub-results .chart{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;height:44px;padding:0 14px;
  border-radius:999px;border:1px solid var(--rule);color:var(--ink-2);font-weight:650;font-size:14px;text-decoration:none;background:var(--tile)}
.hub-results .chart:hover,.hub-results .chart:focus-visible{border-color:var(--accent);color:var(--accent)}
.hub-results .none{margin:0;padding:14px 12px;color:var(--ink-2);font-size:15.5px;line-height:1.5}

/* ---------- Tiles ---------- */
.tile{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--hr);background:var(--tile);box-shadow:var(--shadow);color:var(--ink);
  text-decoration:none;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
a.tile:hover{transform:translateY(-3px)}
a.tile:active{transform:scale(.992)}
a.tile:focus-visible{outline-offset:4px;border-radius:var(--hr)}
.t-art{display:flex;align-items:center;justify-content:center;background-color:var(--tile-2);
  background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 8px)}   /* the tile's cloth: a faint Aida weave */
.t-txt{display:block;padding:16px 64px 20px 20px}
.t-name{margin:0;font-family:var(--display);font-weight:var(--display-w);letter-spacing:calc(var(--track) * .55);font-size:clamp(19px,2.1vw,24px);line-height:1.18;color:var(--ink)}
.t-line{display:block;overflow-wrap:break-word;hyphens:auto;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.tile>.go{position:absolute;right:16px;bottom:16px;width:38px;height:38px;padding:10px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  transition:background .2s,color .2s,transform .28s var(--ease)}
a.tile:hover>.go{background:var(--accent);color:var(--on-accent);transform:translateX(2px)}
.mid{width:34px;height:20px;flex:none;color:var(--accent)}
.sw{vertical-align:baseline}

.tools{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
/* The photo and its chart: the maker's own example. */
.art-photo{gap:clamp(8px,3vw,20px);padding:clamp(16px,3vw,28px) 16px}
.art-photo img{width:auto;height:clamp(150px,44vw,300px);border-radius:12px;box-shadow:0 10px 26px -14px rgba(60,10,25,.5)}
/* The finder: DMC 321 and its nearest shade in three brands, the same sum the tool does. */
.art-find{gap:clamp(10px,2.4vw,18px);padding:18px 16px}
.fs{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:650;white-space:nowrap;font-feature-settings:'tnum'}
.fs .sw{width:30px;height:30px;margin:0;border-radius:9px}
.fs-main{flex-direction:column;gap:8px;font-size:15.5px}
.fs-main .sw{width:70px;height:70px;border-radius:18px}
.fs-list{display:grid;gap:9px}
.art-names{padding:16px}
.art-names img{width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--rule)}

.t-calc{padding:18px 18px 14px}
.t-calc .t-name{margin:0 4px 10px}
.t-calc .t-name a{color:inherit;text-decoration:none}
.t-calc .t-name a:hover{color:var(--accent)}
.t-calc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.t-calc li a{display:flex;align-items:flex-start;gap:14px;min-height:64px;height:100%;padding:13px 14px;border-radius:14px;background:var(--tile-2);color:var(--ink);text-decoration:none;
  transition:background .2s,transform .28s var(--ease)}
.t-calc li a:hover{background:var(--accent-soft);transform:translateY(-2px)}
.t-calc .ic{width:30px;height:30px;flex:none;margin-top:1px;color:var(--accent)}
.t-calc li b{display:block;font-size:16.5px;line-height:1.25}
.t-calc li span span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}

@media (max-width:639px){
  .art-find{padding:16px 12px}
  .art-names{padding:14px}
  .art-photo img{height:clamp(150px,46vw,230px)}
  .cb .strip .sw:nth-child(even){display:none}
}
@media (min-width:640px) and (max-width:999px){
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-photo{grid-column:1/-1}
  .t-calc{grid-column:1/-1}
  .t-calc ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .art-photo img{height:clamp(200px,32vw,290px)}
}
@media (min-width:1000px){
  .tools{grid-template-columns:repeat(12,minmax(0,1fr))}
  .t-photo{grid-column:1/8;grid-row:1/3}
  .t-find{grid-column:8/13;grid-row:1}
  .t-names{grid-column:8/13;grid-row:2}
  .t-calc{grid-column:1/13;grid-row:3}
  .t-photo .t-art{flex:1}
  .t-photo .t-name{font-size:clamp(24px,2.4vw,30px)}
  .t-photo .t-line{font-size:15.5px;max-width:46ch}
  .art-photo img{height:clamp(240px,23vw,330px)}
  .t-calc ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Patterns: a row of the real previews ---------- */
.pat-row{list-style:none;display:flex;gap:12px;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 14px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pat-row::-webkit-scrollbar{display:none}
.pat-row>li{flex:0 0 clamp(140px,40vw,176px);scroll-snap-align:start}
.pat-row a{display:flex;flex-direction:column;height:100%;border-radius:var(--hr);overflow:hidden;background:var(--tile);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;
  transition:transform .28s var(--ease)}
.pat-row a:hover{transform:translateY(-3px)}
.pat-row img{display:block;width:100%;height:auto;aspect-ratio:4/5;background:var(--cloth)}
.pn{display:block;padding:10px 12px 13px;font-size:14px;line-height:1.3;font-weight:650;overflow-wrap:anywhere;hyphens:auto}
.pat-row .all a{background:var(--accent-soft);box-shadow:none}
.pat-row .stack{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.pat-row .stack img{position:absolute;width:62%;aspect-ratio:4/5;height:auto;border-radius:10px;box-shadow:0 8px 20px -10px rgba(60,10,25,.55)}
.pat-row .stack img:nth-child(1){left:6%;top:10%;transform:rotate(-7deg)}
.pat-row .stack img:nth-child(2){left:30%;top:22%;transform:rotate(4deg)}
.pat-row .stack img:nth-child(3){left:14%;top:38%;transform:rotate(-2deg)}
.pat-row .all .pn{color:var(--accent);font-size:15px}
@media (min-width:1000px){
  .pat-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0}
  .pat-row>li{flex:none}
  .pat-row .x{display:none}
}

/* ---------- Catalogues, with their colours ---------- */
.cats{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.cats .tile{padding:20px 20px 12px}
.cats .t-name a{color:inherit;text-decoration:none}
.cats .t-name a:hover{color:var(--accent)}
.c-count{margin:4px 0 14px;font-size:14px;color:var(--muted);font-feature-settings:'tnum'}
.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cb{display:block;min-width:0;padding:10px 10px 11px;border-radius:14px;background:var(--tile-2);color:var(--ink);text-decoration:none;transition:background .2s,transform .28s var(--ease)}
.cb:hover{background:var(--accent-soft);transform:translateY(-2px)}
.bn{display:block;margin-top:8px;font-weight:650;font-size:15px;line-height:1.25}
.hub .strip{display:flex;gap:3px;margin:0;padding:0}
.hub .strip .sw{flex:1 1 0;width:auto;min-width:0;height:28px;margin:0;border-radius:5px}
.hub .strip .sw.bead{height:auto;aspect-ratio:1;border-radius:50%;
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.2),inset 2px 3px 5px rgba(255,255,255,.4),inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)}
.hub .strip .sw.cloth{height:40px;border-radius:3px}
.hub .strip.beadstrip,.hub .strip.clothstrip{margin:0 0 14px}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0}
.pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--rule);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;
  transition:border-color .2s,color .2s}
.pills a:hover{border-color:var(--accent);color:var(--accent)}
.links{list-style:none;margin:0 0 4px;padding:0;border-top:1px solid var(--rule)}
.links a{overflow-wrap:break-word;hyphens:auto;display:flex;align-items:center;min-height:46px;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.3;text-decoration:none}
.links a:hover{color:var(--accent)}
.cats .more{margin-top:2px}
@media (min-width:640px) and (max-width:999px){
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-threads{grid-column:1/-1}
  .brands{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){
  .cats{grid-template-columns:repeat(12,minmax(0,1fr))}
  .c-threads{grid-column:1/7}
  .c-beads{grid-column:7/10}
  .c-fabrics{grid-column:10/13}
  .cats .tile{padding:22px 22px 14px}
}

/* ---------- Reference, quietly ---------- */
.refs{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.refs a{display:flex;align-items:center;gap:14px;height:100%;min-height:76px;padding:15px 18px;border-radius:18px;border:1px solid var(--rule);color:var(--ink);text-decoration:none;
  transition:background .2s,border-color .2s}
.refs a:hover{background:var(--tile);border-color:transparent;box-shadow:var(--shadow)}
.refs a>span{min-width:0}
.refs b{display:block;font-size:16.5px;line-height:1.25}
.refs a>span>span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.refs .go{margin-left:auto;color:var(--muted)}
.refs a:hover .go{color:var(--accent)}
@media (min-width:640px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.refs{grid-template-columns:repeat(4,minmax(0,1fr))}}

html[data-style="night"] .art-photo img{box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
@media print{.hub-find,.hub-quick{display:none!important}}