/* Dedicated listing page for one specimen. Loads beside site.css but runs without site.js. */
.pp-body{background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;min-height:100%}
.pp-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);
  background:rgba(5,7,13,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pp-nav .mk{font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.pp-nav .sl{font-family:var(--script);font-size:19px;color:var(--ink3);margin-left:-14px}
.pp-nav .sp{flex:1}
.pp-nav a.lnk{font-size:14px;color:var(--ink2);text-decoration:none}
.pp-nav a.lnk:hover{color:var(--accent,#25b9a3)}

.pp-wrap{max-width:1180px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(18px,4vw,56px) 80px}
.pp-crumb{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:20px}
.pp-crumb a{color:var(--ink3);text-decoration:none}
.pp-crumb a:hover{color:var(--accent,#25b9a3)}

.pp-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
.pp-figure{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--bg2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:300px}
.pp-figure img{width:100%;height:auto;max-height:min(72vh,660px);object-fit:contain;display:block}
.pp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:10px}
.pp-thumbs button{padding:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg2);
  cursor:pointer;aspect-ratio:1;transition:border-color .2s;display:flex;align-items:center;justify-content:center}
.pp-thumbs button[aria-current="true"]{border-color:var(--accent,#25b9a3)}
.pp-thumbs img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

.pp-kind{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#25b9a3)}
.pp-hook{margin:10px 0 4px;font-size:clamp(28px,3.6vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.02em;text-wrap:pretty}
.pp-name{margin:0 0 16px;font-size:15px;color:var(--ink3)}
.pp-blurb{margin:0 0 20px;font-size:16px;line-height:1.75;color:var(--ink2);max-width:52ch}
.pp-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pp-price{font-size:28px;font-weight:700}
.pp-price small{font-size:14px;font-weight:400;color:var(--ink3);margin-left:4px}
.pp-stock{font-size:14px;color:var(--ink3)}
.pp-note{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--ink3);max-width:46ch}

.pp-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 22px;margin:24px 0 0;
  padding:16px 0;border-bottom:1px solid var(--line)}
.pp-spec dt{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.pp-spec dd{font-size:14px;margin-top:3px;color:var(--ink)}

.pp-section{margin-top:38px}
.pp-section h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin:0 0 14px}
.pp-section p{font-size:16px;line-height:1.8;color:var(--ink2);margin:0 0 14px;max-width:62ch;text-wrap:pretty}
.pp-section ul{list-style:none;margin:0;padding:0;max-width:62ch}
.pp-section li{position:relative;padding-left:18px;font-size:15px;line-height:1.7;color:var(--ink2);margin-bottom:6px}
.pp-section li::before{content:"";position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--accent,#25b9a3)}

.pp-more{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:16px}
.pp-card{display:block;text-decoration:none;color:inherit}
.pp-card .th{aspect-ratio:1;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.pp-card:hover .th{border-color:var(--accent,#25b9a3)}
.pp-card .th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pp-card b{display:block;margin-top:8px;font-size:14px;font-weight:500}
.pp-card span{font-size:14px;color:var(--ink3)}

/* Inline formatting the listing copy can carry. */
.pp-body mark{background:rgba(230,173,89,.28);color:inherit;padding:0 3px;border-radius:3px}
.pp-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.pp-body small{font-size:.86em;color:var(--ink3)}
.pp-section a,.pp-blurb a,.pp-note a{color:var(--accent,#25b9a3);text-decoration:underline;text-underline-offset:2px}
.pp-section a:hover,.pp-blurb a:hover,.pp-note a:hover{color:var(--ink)}

/* The listing prose and the four-line verse, side by side, so the right half of
 * a wide page carries content instead of running empty for the whole listing. */
.pp-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(26px,4vw,56px);align-items:start}
.pp-prose{min-width:0}
.pp-prose .pp-section p,.pp-prose .pp-section ul{max-width:68ch}
.pp-verse{position:sticky;top:96px;margin-top:38px;padding:22px 24px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg2)}
.pp-verse h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin:0 0 14px}
.pp-verse p{font-family:var(--script,'Caveat',cursive);font-size:23px;line-height:1.45;color:var(--ink);margin:0 0 2px}
.pp-verse p:last-child{margin-bottom:0}

/* A listing with no prose yet: the verse leads instead of hanging in a rail
 * beside an empty column. */
.pp-read-bare{grid-template-columns:1fr}
.pp-read-bare .pp-prose{display:none}
.pp-read-bare .pp-verse{position:static;max-width:none;margin-top:34px;padding:30px 34px}
.pp-read-bare .pp-verse p{font-size:clamp(24px,3vw,32px);line-height:1.4}

@media (max-width:980px){
  .pp-read{grid-template-columns:1fr}
  .pp-verse{position:static;max-width:52ch}
}

@media (max-width:820px){
  .pp-top{grid-template-columns:1fr;gap:24px}
  .pp-figure img{max-height:52vh}
}

/* The shop index toolbar. Uses the chip and swatch vocabulary the orbit page
   already established in site.css. */
.shop-tools{margin:24px 0 4px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.shop-tools[hidden]{display:none}
.shop-search input{width:100%;max-width:420px;padding:10px 13px;border:1px solid var(--line2);
  border-radius:9px;background:var(--bg2);color:var(--ink);
  font:400 15px/1.5 'Space Grotesk',sans-serif}
.shop-search input:focus{outline:2px solid var(--accent,#25b9a3);outline-offset:1px;border-color:transparent}
.shop-tools .sa-filters{gap:14px}
.shop-tools .sa-fgroup .meta{white-space:nowrap}
.shop-tools select.chip{cursor:pointer;padding-right:8px}
.shop-tools .chip.on{border-color:var(--accent,#25b9a3);color:var(--accent,#25b9a3)}
.shop-tools .meta,.shop-tools .chip{font-size:14px}
.pp-buy .btn{font-size:14px}
.shop-tools [data-shop-count]{margin-left:auto}
.pp-card[hidden]{display:none}
.pp-grid[hidden]{display:none}
@media (max-width:640px){
  .shop-tools .sa-filters{gap:10px}
  .shop-tools [data-shop-count]{margin-left:0;flex-basis:100%}
}
/* iOS zooms the page into any field under 16px when it takes focus, and leaves it zoomed */
@media (pointer:coarse){
  .shop-search input,.shop-tools select.chip{font-size:16px}
}

/* Copied verbatim from css/apps.css, which the listing and policy pages do not
   load, so a label meant for a screen reader is not printed on the page. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* On a phone the brand takes the first row and the links share the second,
   instead of the last link dropping alone under the logo. */
@media (max-width:520px){
  .pp-nav .sp{flex-basis:100%;height:0}
  .pp-nav{row-gap:8px}
}