/* Campaign photo: each shirt links to its cat. */
.look-map{position:relative;margin:0}
.look-map picture{display:block}
.look-map img{width:100%;height:auto}
.look-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:8px;transform:translate(-22px,-22px)}
.pin-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--acid);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 14px/1 var(--mono);transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s}
.pin-label{padding:9px 13px;background:var(--ink);color:var(--acid);font:20px/1 var(--display);text-transform:uppercase;white-space:nowrap;transform:rotate(-3deg);opacity:0;translate:-6px 0;transition:opacity .2s,translate .3s cubic-bezier(.22,1,.36,1);pointer-events:none}
.look-pin:hover .pin-dot,.look-pin:focus-visible .pin-dot{transform:scale(1.12) rotate(-8deg);background:var(--paper)}
.look-pin:hover .pin-label,.look-pin:focus-visible .pin-label{opacity:1;translate:0 0}
.look-pin:focus-visible{outline:none}
.look-pin:focus-visible .pin-dot{outline:3px solid var(--purple);outline-offset:3px}
.look-pin.pin-left{flex-direction:row-reverse;transform:translate(calc(-100% + 22px),-22px)}
.look-hint{position:absolute;left:18px;bottom:18px;z-index:2;font-size:13px}
@keyframes pin-nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.look-map:not(:hover) .look-pin:nth-of-type(1) .pin-dot{animation:pin-nudge 2.4s cubic-bezier(.22,1,.36,1) 1.2s 2}
@media(max-width:700px){
  .look-pin{left:var(--mx);top:var(--my)}
  .pin-dot{width:40px;height:40px;font-size:13px}
  .look-pin{transform:translate(-20px,-20px)}
  .pin-label{display:none}
  .look-hint{left:10px;bottom:10px;font-size:12px;padding:9px 12px}
}

/* Wardrobe page: a real clothes rail. */
.rail-wrap{position:relative;margin:0 -5.3%}
.rail-wrap:before{content:'';position:absolute;left:0;right:0;top:12px;height:12px;z-index:1;border-radius:6px;background:linear-gradient(#fbfaf2,#8d8c86 55%,#c9c8bf);box-shadow:0 5px 6px #19181740;pointer-events:none}
.is-rail{display:flex!important;gap:34px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:5.3%;padding:0 5.3% 34px!important;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.is-rail .hanger{flex:0 0 clamp(250px,25vw,340px);scroll-snap-align:start;padding-top:80px;transform-origin:50% 18px}
.is-rail .hanger:before{content:'';position:absolute;top:0;left:15%;right:15%;height:82px;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 82' preserveAspectRatio='none'%3E%3Cpath d='M100 30V22C100 16 113 15 113 8C113 2 106 0 101 1C96 2 94 6 95 9M100 30L6 80H194Z' fill='none' stroke='%235f5e57' stroke-width='4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.is-rail .hanger:nth-child(n){transform:rotate(0)}
@keyframes hanger-swing{0%{transform:rotate(0)}30%{transform:rotate(3.5deg)}60%{transform:rotate(-1.8deg)}100%{transform:rotate(0)}}
.is-rail .hanger:hover,.is-rail .hanger:focus-within{animation:hanger-swing .9s cubic-bezier(.22,1,.36,1)}
.rail-controls{display:flex;align-items:center;gap:10px;margin-top:6px}
.rail-controls .paper-label{min-width:52px;font-size:20px}
.rail-controls button:disabled{opacity:.35;cursor:default}
.rail-controls .tiny{margin-left:6px}
@media(max-width:700px){
  .rail-wrap{margin:0 -6%}
  .is-rail{gap:20px;scroll-padding-inline:6%;padding-inline:6%!important}
  .is-rail .hanger{flex-basis:72vw}
}

/* Hero: the note changes per visit and the cat leans toward the button. */
.opinion-note{max-width:210px}
.note-line{display:block}
.hero-cat{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.collage-hero:has(.hero-buy a:hover,.hero-buy a:focus-visible) .hero-cat{transform:rotate(-14deg) translate(-5%,-3%)}

@media(prefers-reduced-motion:reduce){.hero-cat{transition:none}}

/* Hero cat eyes: SVG irises over the artwork, moved by app.js. */
.hero-cat-art{display:block;width:100%;height:auto}
.cat-eyes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Home: the wardrobe is the main next step, so it gets a real button next to the heading and after the cards. */
.wardrobe-cta,.wardrobe-more{width:auto;max-width:400px;font-size:34px;transform:rotate(-3deg);flex-shrink:0}
.wardrobe-more{margin-top:44px;transform:rotate(-2deg)}
.wardrobe-cta>span,.wardrobe-more>span{font:44px/1 var(--display)}
@media(max-width:700px){
  .wardrobe-cta,.wardrobe-more{display:flex;max-width:100%;font-size:28px;margin-top:22px}
}

/* Product page: the case file. */
.product-page{background:#2a2622}
.dossier-desk{padding:40px 4% 80px;background:radial-gradient(ellipse at 30% 0,#4a4239,#2a2622 60%);color:var(--ink)}
.dossier-crumb{max-width:1240px;margin:0 auto 58px;color:var(--paper);font:700 13px/1 var(--mono);letter-spacing:1px}
.dossier-crumb a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:4px}
.dossier{position:relative;max-width:1240px;margin:0 auto;padding:54px 48px 56px;background:#d8b878;box-shadow:0 30px 60px #0007,inset 0 0 90px #a0782f55;border-radius:2px 8px 8px 8px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:'mug report' 'exhibits exhibits';gap:44px 48px;align-items:start}
.folder-tab{position:absolute;left:0;top:-34px;padding:10px 22px 8px;background:#d8b878;border-radius:8px 8px 0 0;font:700 14px/1 var(--mono);letter-spacing:1.5px}
.mugshot{grid-area:mug;position:relative;background:#e9e4d8;padding:16px 16px 0;box-shadow:3px 4px 0 #0003;transform:rotate(-1.5deg)}
.height-chart{position:relative;aspect-ratio:4/4.3;background:repeating-linear-gradient(#e9e4d8 0 27px,#1918171a 27px 29px),#d9d4c6;overflow:hidden}
.height-chart span{position:absolute;left:8px;font:700 12px/1 var(--mono);color:#19181799}
.height-chart .mug-art{position:absolute;left:50%;bottom:0;width:86%;height:auto;max-height:92%;object-fit:contain;object-position:bottom;translate:-50% 0}
.placard{position:relative;z-index:2;margin:-58px auto 0;width:78%;padding:10px 14px;background:var(--ink);color:var(--paper);font:700 15px/1.35 var(--mono);letter-spacing:1px;text-align:center}
.placard strong{display:block;font:30px/1 var(--display);letter-spacing:1px;color:var(--acid)}
.stamp{position:absolute;right:-22px;top:38px;z-index:3;padding:8px 16px;border:5px solid var(--red);color:var(--red);font:clamp(30px,3.4vw,46px)/1 var(--display);letter-spacing:3px;transform:rotate(-14deg);opacity:.85;mix-blend-mode:multiply;pointer-events:none}
.report{grid-area:report;position:relative;padding:34px 36px 30px;font:16px/1.65 var(--mono);background:repeating-linear-gradient(#fbf7ee 0 31px,#7aa0c822 31px 32px);box-shadow:3px 4px 0 #0002}
.report .kicker{font:700 13px/1.3 var(--mono);letter-spacing:1.5px;margin-top:20px}
.report .kicker:first-child{margin-top:0}
.report h1{font:clamp(48px,5.4vw,84px)/.95 var(--display);text-transform:uppercase;margin:8px 0 16px;overflow-wrap:break-word}
.statement{margin:0 0 24px;padding:12px 16px;background:var(--paper);font:22px/1.25 var(--hand);color:var(--purple);transform:rotate(-1deg)}
.bail{display:block;margin-bottom:8px;padding:20px 24px;background:var(--red);color:var(--paper);font:34px/1 var(--display);text-transform:uppercase;box-shadow:5px 5px 0 var(--ink);transition:translate .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.bail small{display:block;margin-top:8px;font:700 13px/1.3 var(--mono);letter-spacing:.6px}
.bail:hover{translate:-2px -2px;box-shadow:8px 8px 0 var(--ink)}
.bail:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.report .description{font:17px/1.6 var(--serif);margin:6px 0 0;max-width:none}
.report details{border-top:1px solid #19181733;margin-top:20px;padding-top:12px}
.report summary{cursor:pointer;min-height:32px;font:700 14px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.5px}
.report details p{font:15px/1.6 var(--serif);margin-top:8px}
.signature{margin-top:20px;font:13px/1.5 var(--mono);color:#5b544a}
.exhibits{grid-area:exhibits;display:flex;flex-wrap:wrap;justify-content:center;gap:34px 36px;align-items:flex-start;padding:26px 0 6px;border-top:2px dashed #8a6a2f66}
.evidence{position:relative;flex:0 1 310px;margin:0;padding:12px 12px 14px;background:#fff9ef;box-shadow:4px 6px 12px #0004}
.evidence-tee{transform:rotate(-3deg)}
.evidence-photo{transform:rotate(2.5deg)}
.evidence-photo:nth-child(2){transform:rotate(-2deg);margin-top:26px}
.exhibits:has(> :nth-child(4)){gap:30px 26px}
.exhibits:has(> :nth-child(4)) .evidence{flex-basis:225px}
.evidence figcaption{margin-top:10px;font:18px/1.2 var(--hand);text-align:center}
.clip{position:absolute;top:-26px;left:46%;width:22px;height:70px;border:4px solid #8d8c86;border-radius:12px;z-index:2}
.tee-frame{aspect-ratio:4/5;display:grid;place-items:center;padding:8%;background:#cfc1e2}
.tee-frame svg{width:100%;height:100%;filter:drop-shadow(4px 6px 0 #19181730)}
.tee-body{fill:var(--tee,#1f1e1d);stroke:#19181740;stroke-width:2}
.tee-rib{fill:none;stroke:#00000030;stroke-width:5}
.evidence-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--acid)}
.swatches{display:flex;justify-content:center;gap:2px;margin-top:8px}
.swatch{width:44px;height:44px;padding:8px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.swatch:before{content:'';width:26px;height:26px;border-radius:50%;background:var(--tee);border:2px solid var(--ink);box-sizing:border-box}
.swatch[aria-pressed=true]{background:var(--acid)}
.swatch:hover{background:#e6fc3299}
.lineup{max-width:1240px;margin:60px auto 0;color:var(--paper)}
.lineup h2{font:34px/1 var(--display);text-transform:uppercase;margin-bottom:18px}
.suspects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.suspects a{background:#e9e4d8;color:var(--ink);padding:10px 10px 12px;transform:rotate(-1deg);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.suspects a:nth-child(even){transform:rotate(1.5deg)}
.suspects a:hover{transform:rotate(0) translateY(-6px)}
.suspects img{width:100%;aspect-ratio:1;object-fit:contain;background:repeating-linear-gradient(#e9e4d8 0 19px,#19181714 19px 20px)}
.suspects span{display:block;margin-top:8px;font:700 13px/1.2 var(--mono)}
.lineup-all{display:inline-flex;min-height:44px;align-items:center;margin-top:22px;font:700 14px/1 var(--mono);letter-spacing:.8px;text-decoration:underline;text-underline-offset:5px;color:var(--acid)}
@media(max-width:860px){
  .dossier-desk{padding:24px 14px 60px}
  .dossier-crumb{margin-bottom:44px;font-size:12px}
  .dossier{grid-template-columns:1fr;grid-template-areas:'mug' 'report' 'exhibits';padding:26px 14px 24px;gap:22px}
  .mugshot{width:min(270px,80%);margin:0 auto;padding:12px 12px 0}
  .placard{font-size:12px;letter-spacing:.2px;margin-top:-48px;width:92%;padding:8px 8px}
  .crumb-extra{display:none}
  .dossier-crumb{margin-bottom:40px}.placard strong{font-size:26px}
  .stamp{right:-10px;top:24px}
  .report{padding:20px 16px}
  .report .kicker:first-child{font-size:12px}
  .bail{font-size:27px;padding:18px}
  .exhibits{flex-direction:column;align-items:center;padding:20px 0 0;gap:30px}
  .evidence{flex:none;width:min(320px,90%)}
  .evidence-photo:nth-child(2){margin-top:0}
  .evidence-photo{margin-top:0}
  .suspects{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* Designs not yet on Amazon */
.soon-badge{position:absolute;left:10px;top:10px;z-index:3;padding:6px 10px;background:var(--acid);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;transform:rotate(-4deg);pointer-events:none}
.mugshot .soon-badge{left:-10px;top:22px;font-size:14px;padding:8px 12px}
.suspects a{position:relative}
.suspects .soon-badge{font-size:10px;padding:4px 7px;left:4px;top:4px}
.hanger-label{position:relative}
.hanger-label .soon-badge{left:auto;right:14px;top:-16px}