/* ======================================================================
   CLOTHING PAGE — /alpacas/clothing/
   Load after style.css and alpacas.css. This stylesheet only adds a
   textile-focused treatment to the shared article components.
   ====================================================================== */

.clothing-head{ max-width:48rem; }

.clothing-jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  margin:2rem 0 .25rem;
  padding:.875rem 0;
  border-block:1px solid var(--fleece-beige);
}
.clothing-jump-links a{
  padding:.25rem 0;
  color:var(--fleece-brown);
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none;
}
.clothing-jump-links a:not(:last-child)::after{
  content:"/";
  margin-left:.75rem;
  color:var(--fleece-beige);
}
.clothing-jump-links a:hover{ color:var(--indigo); text-decoration:underline; }

/* A light textile panel makes every garment category feel like a distinct
   chapter without altering the shared split layout used elsewhere. */
.clothing-page .clothing-split{
  position:relative;
  margin-top:3.5rem;
  padding:2rem;
  border-top:0;
  background:linear-gradient(135deg, rgba(251,250,247,.94), rgba(220,213,200,.26));
  border:1px solid var(--fleece-beige);
  border-left:4px solid var(--thread, var(--fleece-silver));
  border-radius:0 var(--radius) var(--radius) 0;
}
.clothing-page .clothing-split::before{
  content:"";
  position:absolute;
  inset:.6rem;
  pointer-events:none;
  border:1px solid rgba(220,213,200,.55);
  border-left:0;
  border-radius:0 2px 2px 0;
}
.clothing-page #socks{ --thread:#8E7256; }
.clothing-page #sweaters{ --thread:#667D63; }
.clothing-page #jumpers{ --thread:#657D91; }
.clothing-page #blankets{ --thread:#A06D4D; }
.clothing-page #scarves{ --thread:#7C514B; }
.clothing-page #how-its-made{ --thread:var(--indigo); }

.clothing-page .clothing-split > *{ position:relative; z-index:1; }
.clothing-page .clothing-split figure img{ aspect-ratio:16/9; object-fit:cover; }
.clothing-page .clothing-split figure a{ display:block; }
.clothing-page .clothing-split figure a:hover img{ filter:brightness(.97); }
.clothing-page .clothing-split h2 a{
  color:inherit;
  text-decoration:none;
}
.clothing-page .clothing-split h2 a:hover{ color:var(--indigo); }

/* The alternation comes from alpacas.css; these preserve balanced padding
   and keep the panel comfortable at the tablet and phone breakpoints. */
@media (max-width:52rem){
  .clothing-page .clothing-split{
    gap:1.5rem;
    margin-top:2.5rem;
    padding:1.25rem;
  }
}

@media (max-width:30rem){
  .clothing-jump-links{ gap:.25rem .6rem; }
  .clothing-jump-links a:not(:last-child)::after{ margin-left:.6rem; }
  .clothing-page .clothing-split{ padding:1rem; }
}