/* Shop by category — one shelf, printed on a torn selection sheet.

   Two Claude Design files describe this page: a phone one at two columns and
   a desktop one at four. Both are reproduced verbatim. The phone values are
   the base and the desktop values live in the one min-width block near the
   bottom, so the narrow layout is exactly the file it came from and the wide
   one only adds to it.

   They change over at 720px, which is the width the rest of the site already
   treats as the end of a phone (styles.css). It also falls in the gap the two
   files leave between them: the phone headline stops growing at 582px, and
   the desktop paddings and gaps reach their floors around 690px, so neither
   file is being used outside the range it was drawn for.

   This is a separate stylesheet so nothing on the pages already built can be
   disturbed by it; only category.html loads it. */

.ct-page{position:relative;z-index:4;padding:14px 11px 30px}

/* The sheet is torn along the top AND the bottom, so it carries its own
   clip-path rather than the site's top-only .torn-top. */
.ct-sheet{max-width:1560px;margin:0 auto;background:#faf9f4;color:#121210;padding:20px 18px 54px;
  box-shadow:0 34px 70px rgba(28,44,26,.28);
  clip-path:polygon(0.00% 6.9px,2.17% 9.6px,4.35% 2.1px,6.52% 4.1px,8.70% 5.4px,10.87% 10.2px,13.04% 4.0px,15.22% 2.9px,17.39% 3.7px,19.57% 10.2px,21.74% 5.2px,23.91% 5.5px,26.09% 7.2px,28.26% 10.8px,30.43% 5.0px,32.61% 10.1px,34.78% 7.6px,36.96% 9.0px,39.13% 10.9px,41.30% 5.3px,43.48% 9.4px,45.65% 9.5px,47.83% 9.8px,50.00% 7.5px,52.17% 8.7px,54.35% 8.0px,56.52% 9.0px,58.70% 8.2px,60.87% 10.4px,63.04% 6.4px,65.22% 9.6px,67.39% 9.2px,69.57% 3.3px,71.74% 9.0px,73.91% 4.1px,76.09% 7.7px,78.26% 10.9px,80.43% 3.3px,82.61% 10.8px,84.78% 8.0px,86.96% 9.1px,89.13% 6.8px,91.30% 5.1px,93.48% 4.9px,95.65% 8.8px,97.83% 3.5px,100.00% 2.5px,100.00% calc(100% - 7.1px),97.83% calc(100% - 8.4px),95.65% calc(100% - 9.7px),93.48% calc(100% - 6.8px),91.30% calc(100% - 8.1px),89.13% calc(100% - 8.6px),86.96% calc(100% - 7.5px),84.78% calc(100% - 7.6px),82.61% calc(100% - 8.7px),80.43% calc(100% - 8.9px),78.26% calc(100% - 9.3px),76.09% calc(100% - 3.9px),73.91% calc(100% - 5.2px),71.74% calc(100% - 5.4px),69.57% calc(100% - 5.9px),67.39% calc(100% - 3.2px),65.22% calc(100% - 2.2px),63.04% calc(100% - 2.0px),60.87% calc(100% - 9.2px),58.70% calc(100% - 3.3px),56.52% calc(100% - 2.2px),54.35% calc(100% - 5.0px),52.17% calc(100% - 8.4px),50.00% calc(100% - 8.9px),47.83% calc(100% - 8.3px),45.65% calc(100% - 8.0px),43.48% calc(100% - 9.5px),41.30% calc(100% - 9.8px),39.13% calc(100% - 9.8px),36.96% calc(100% - 10.1px),34.78% calc(100% - 3.9px),32.61% calc(100% - 10.0px),30.43% calc(100% - 3.0px),28.26% calc(100% - 2.2px),26.09% calc(100% - 9.0px),23.91% calc(100% - 3.4px),21.74% calc(100% - 6.7px),19.57% calc(100% - 10.7px),17.39% calc(100% - 10.3px),15.22% calc(100% - 3.5px),13.04% calc(100% - 8.7px),10.87% calc(100% - 9.8px),8.70% calc(100% - 6.2px),6.52% calc(100% - 7.1px),4.35% calc(100% - 4.2px),2.17% calc(100% - 3.8px),0.00% calc(100% - 8.2px))}

.ct-header{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-bottom:1px solid #121210;padding-bottom:13px}
.ct-header a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase}
.ct-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}

.ct-intro{display:flex;flex-direction:column;gap:clamp(10px,1vw,16px);padding-top:26px;
  padding-bottom:32px}
.ct-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#8b877c}
.ct-title{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(38px,11vw,64px);line-height:.92;letter-spacing:-.03em}
.ct-standfirst{margin:0;max-width:46ch;font-size:16.5px;line-height:1.5;font-weight:300;
  color:#4c4a42;text-wrap:pretty}

.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:46px}
.ct-item{margin:0}

/* The bubble treatment on this sheet is one drawn blob, the same on every
   piece — unlike the home page, where each slot carries its own shape. */
.ct-bubble{display:block;transition:transform .4s ease;position:relative;width:100%;aspect-ratio:1;
  background:#f6f4ea;border-radius:54% 46% 49% 51% / 47% 52% 48% 53%;overflow:hidden;
  box-shadow:0 14px 26px rgba(34,52,28,.18)}
.ct-bubble:hover{transform:scale(1.024)}
.ct-bubble:focus-visible{outline:2px solid #aed277;outline-offset:5px}
.ct-bubble img,.ct-bubble video{width:100%;height:100%;object-fit:cover;display:block}

.ct-caption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  margin-top:16px;padding:0 6%}
.ct-name{font-size:14.5px;color:#22301c}
.ct-price{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:#4a6338}

.ct-foot{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:56px}
.ct-cta{display:inline-flex;align-items:center;gap:16px;background:#121210;color:#faf9f4;
  padding:18px 30px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase}
.ct-cta:hover{background:#3a5a34;color:#faf9f4}
.ct-foot-note{font-family:'Newsreader',serif;font-style:italic;font-size:16px;color:#8b877c}

/* An empty shelf still has to read as a sheet, not as a bug. */
.ct-empty{grid-column:1 / -1;margin:0;text-align:center;padding:clamp(30px,8vw,64px) 0;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(20px,2.4vw,30px);line-height:1.1;
  color:#4c4a42}

/* ---- the desktop file, from 720px up ----

   Everything not restated here — the sheet's torn edges and shadow, the header
   rule, the bubble's blob radius and hover, the caption spacing, the price, the
   button — is identical in both files and is already set above.

   The footer is not restated either: the desktop file's footer is the site
   footer exactly as the other pages carry it, down to every clamp, which is
   why this page has always shared it. */

@media (min-width:721px){
  .ct-page{padding:clamp(34px,4.4vw,72px) clamp(20px,4.6vw,90px) clamp(46px,6vw,110px)}
  .ct-sheet{padding:clamp(26px,2.6vw,42px) clamp(26px,3.4vw,66px) clamp(56px,6vw,104px)}

  .ct-intro{padding-top:clamp(30px,4vw,64px);padding-bottom:clamp(34px,4.4vw,72px)}
  .ct-title{font-size:clamp(40px,6.6vw,116px);line-height:.9}
  .ct-standfirst{font-size:clamp(16px,1.24vw,20px)}

  .ct-grid{grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(18px,2.6vw,48px);row-gap:clamp(50px,5.4vw,92px)}
  .ct-name{font-size:15.5px}

  .ct-foot{padding-top:clamp(64px,7vw,120px)}
}

@media (prefers-reduced-motion:reduce){
  .ct-bubble{transition:none}
  .ct-bubble:hover{transform:none}
}