/* The NFT is the fixed object. Its portfolio and ownership record unfold beside it. */
#website.society-experience #portfolio-guide{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);gap:5%;align-items:center;min-height:0}
#portfolio-guide .anatomy-copy{min-width:0}
@media(min-width:1101px){#website.society-experience #portfolio-guide .anatomy-copy h2{font-size:clamp(44px,4.5vw,68px)}}
#portfolio-guide .anatomy-copy>p{max-width:38ch}
#portfolio-guide .anatomy-tabs{width:100%;max-width:265px;gap:0;margin:25px 0 18px}
#portfolio-guide .anatomy-tabs button{min-height:50px;padding:13px 14px;border-bottom:1px solid #c4c2bf;font-size:14px}
#portfolio-guide .anatomy-tabs button[aria-selected=true]{background:var(--ink);color:var(--lemon)}
#portfolio-guide .anatomy-tabs button:hover:not([aria-selected=true]){background:#eae8e5}
#website.society-experience #portfolio-guide .anatomy-disclaimer{font-size:12px;line-height:1.55;max-width:38ch}
#portfolio-guide .anatomy-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:1fr auto;gap:20px 6%;height:auto;min-height:510px;margin:0;perspective:1400px;align-items:center}
#portfolio-guide .anatomy-object{position:relative;inset:auto;grid-column:1;grid-row:1;width:100%;align-self:center;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s var(--ease)}
#portfolio-guide .nft-face{position:relative;inset:auto;width:100%;padding:7px 7px 0;background:#fff;transform:rotate(-6deg);box-shadow:6px 20px 30px #14120f26;transform-origin:50% 80%;transition:transform .6s var(--ease)}
#portfolio-guide .nft-face img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
#portfolio-guide .nft-face-caption{padding:13px 4px;gap:12px;font-size:10px}
#portfolio-guide .anatomy-stage[data-mode="0"] .nft-face{transform:rotate(-2deg) scale(1.035)}
#portfolio-guide .anatomy-stage[data-mode="2"] .nft-face{transform:rotate(3deg)}
#portfolio-guide .anatomy-panel{position:relative;inset:auto;width:auto;min-width:0;grid-column:2;grid-row:1 / span 2;align-self:center;padding:0;background:none}
#portfolio-guide .anatomy-panel[hidden]{display:none!important}
#website.society-experience #portfolio-guide .anatomy-panel p{font-size:12px;line-height:1.55;color:var(--muted)}
#portfolio-guide .reference-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #c4c2bf;padding-bottom:12px;margin-bottom:12px}
#portfolio-guide .reference-caption b{font-size:12px}
#portfolio-guide .reference-caption>span{font-size:9px;letter-spacing:.04em;color:var(--muted);text-align:right}
#portfolio-guide .reference-sheets{position:relative;inset:auto;display:grid;gap:7px;transform:none;animation:none;translate:none;pointer-events:auto}
#portfolio-guide .reference-sheet{position:relative;inset:auto;min-height:61px;display:grid;grid-template-columns:70px minmax(0,1fr);gap:2px 12px;align-items:center;padding:11px 13px;background:#eae8e5;box-shadow:2px 5px 9px #14120f0d;transform:none;opacity:1;transition:none}
#portfolio-guide .reference-sheet:nth-child(2){background:var(--lemon)}
#portfolio-guide .reference-sheet:nth-child(3){background:#cfe5e7}
#portfolio-guide .reference-sheet:nth-child(4){background:#e8d4bc}
#portfolio-guide .reference-sheet b{grid-row:span 2;font:900 30px/1 var(--display)}
#portfolio-guide .reference-sheet span{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
#portfolio-guide .reference-sheet small{font-size:9px;letter-spacing:.06em;color:#484643;text-transform:uppercase}
#portfolio-guide .market-universe{display:flex;align-items:center;gap:18px;margin:22px 0 12px;padding-top:16px;border-top:1px solid #c4c2bf}
#portfolio-guide .market-universe>strong{display:flex;align-items:center;font:900 42px/.95 var(--display);gap:8px}
#portfolio-guide .market-universe>strong>span{font:600 11px/1.3 'DM Sans',sans-serif;max-width:65px;margin:0}
#website.society-experience #portfolio-guide .market-universe p{font-size:11px;line-height:1.5;color:var(--ink);margin:0}
#portfolio-guide .market-universe p b{padding:0 2px}
#website.society-experience #portfolio-guide .portfolio-example{font-size:11px;margin:0}
#portfolio-guide .anatomy-picker{position:relative;inset:auto;grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px}
#portfolio-guide .anatomy-picker>span{display:block;flex-basis:100%;padding:3px 0 0;text-align:center;font-size:11px}
#portfolio-guide .anatomy-picker button{background:#fff;padding:3px;border:1px solid transparent}
#portfolio-guide .anatomy-picker button[aria-pressed=true]{border-color:var(--ink);background:var(--lemon)}
/* The carousel: one strip of thumbnails that fades out at both ends, the chosen one in the middle, and two round
   arrows that step through it. */
#portfolio-guide .anatomy-picker{flex-wrap:wrap;gap:8px}
#portfolio-guide .pick-strip{position:relative;display:flex;gap:7px;flex:1 1 0;max-width:330px;min-width:0;padding:4px 34px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
#portfolio-guide .pick-strip::-webkit-scrollbar{display:none}
#portfolio-guide .pick-strip button{flex:none;scroll-snap-align:center;transition:transform .25s var(--ease)}
#portfolio-guide .pick-strip button:hover{transform:translateY(-2px)}
#portfolio-guide .anatomy-picker .pick-step{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1.5px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
#portfolio-guide .anatomy-picker .pick-step:hover{background:var(--lemon)}
#portfolio-guide .anatomy-picker .pick-step:active{transform:scale(.94)}
#portfolio-guide .pick-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#portfolio-guide .marker-note{font-size:clamp(28px,3vw,43px);line-height:1.08;transform:rotate(-7deg);margin:0 0 32px}
#portfolio-guide .art-panel h3,#portfolio-guide .history-panel h3{font:900 37px/.98 var(--display);text-transform:uppercase;margin:0 0 16px}
#portfolio-guide .art-panel .text-link{margin-top:20px}
#portfolio-guide .history-panel dl{margin:0 0 24px}
#portfolio-guide .history-panel dl div{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #c4c2bf;padding:11px 0;font-size:12px}
#portfolio-guide .history-panel dd{display:flex;align-items:center;gap:7px;font-weight:600}
#website.society-experience #portfolio-guide .history-panel dd svg{width:15px;height:15px}
#portfolio-guide .ownership-steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
#portfolio-guide .ownership-steps li{position:relative;display:grid;grid-template-columns:87px 1fr;gap:14px;padding:0 0 18px 18px;font-size:12px;line-height:1.5}
#portfolio-guide .ownership-steps li::before{content:'';position:absolute;left:0;top:5px;width:7px;height:7px;border:1px solid var(--ink);background:var(--paper);z-index:1}
#portfolio-guide .ownership-steps li:not(:last-child)::after{content:'';position:absolute;top:12px;bottom:-5px;left:3px;width:1px;background:#aeaca9}
#portfolio-guide .ownership-steps li:nth-child(2)::before{background:var(--ink)}
#portfolio-guide .ownership-steps li:last-child::before{background:var(--lemon)}
#portfolio-guide .ownership-steps b{font-weight:700}
#portfolio-guide .ownership-steps span{color:var(--muted)}
#portfolio-guide .history-panel .text-link{font-size:13px;margin-top:4px}
@media(max-width:1100px){
  #website.society-experience #portfolio-guide{grid-template-columns:1fr;gap:30px}
  #portfolio-guide .anatomy-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 6%}
  #portfolio-guide .anatomy-copy h2{grid-row:span 3;margin-bottom:0;font-size:clamp(48px,6vw,66px)}
  #portfolio-guide .anatomy-copy>p{grid-column:2;max-width:none;margin:0}
  #portfolio-guide .anatomy-copy h2 br:nth-child(2){display:none}
  #portfolio-guide .anatomy-tabs{display:flex;width:100%;max-width:none;grid-column:2;margin:18px 0 14px}
  #portfolio-guide .anatomy-tabs button{flex:1;gap:6px;padding:10px 9px;font-size:12px}
  #website.society-experience #portfolio-guide .anatomy-tabs svg{width:17px;height:17px}
  #portfolio-guide .anatomy-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:20px 7%;min-height:470px;max-width:850px;width:100%;justify-self:center}
  #portfolio-guide .reference-sheet{min-height:60px}
}
@media(max-width:700px){
  #website.society-experience #portfolio-guide{gap:30px}
  #portfolio-guide .anatomy-copy{display:block}
  #portfolio-guide .anatomy-copy h2{font-size:48px;max-width:12ch;margin-bottom:22px}
  #portfolio-guide .anatomy-copy>p{font-size:14px!important;max-width:48ch}
  #website.society-experience #portfolio-guide .anatomy-disclaimer{font-size:12px!important;max-width:none}
  #portfolio-guide .anatomy-tabs{margin:20px 0 16px}
  #portfolio-guide .anatomy-tabs button{font-size:13px;min-height:48px}
  #portfolio-guide .anatomy-stage{min-height:0;gap:18px 5%}
  #portfolio-guide .reference-sheet{grid-template-columns:62px minmax(0,1fr);gap:2px 9px;padding:10px;min-height:58px}
  #portfolio-guide .reference-sheet b{font-size:27px}
  #portfolio-guide .reference-sheet span{font-size:11px}
  #portfolio-guide .market-universe{gap:14px}
  #portfolio-guide .market-universe>strong{font-size:38px}
  #portfolio-guide .market-universe>strong>span{font-size:10px;max-width:59px}
  #portfolio-guide .history-panel h3,#portfolio-guide .art-panel h3{font-size:32px}
  #portfolio-guide .ownership-steps li{grid-template-columns:1fr;gap:3px;padding-bottom:14px}
  #portfolio-guide .nft-face-caption{font-size:9px}
}
@media(max-width:560px){
  #portfolio-guide .anatomy-stage{grid-template-columns:minmax(0,1fr);gap:18px}
  #portfolio-guide .anatomy-object{grid-row:1;width:68%;max-width:280px;justify-self:center;margin-top:8px}
  #portfolio-guide .anatomy-picker{grid-row:2;margin:3px 0 8px}
  #portfolio-guide .anatomy-picker>span{flex-basis:100%;padding:2px 0 0}
  #portfolio-guide .anatomy-panel{grid-column:1;grid-row:3;width:100%}
  #portfolio-guide .reference-sheet{grid-template-columns:75px 1fr;min-height:57px}
  #portfolio-guide .reference-sheet span{font-size:13px}
  #portfolio-guide .reference-caption b{font-size:13px}
  #portfolio-guide .market-universe{justify-content:space-between}
  #portfolio-guide .market-universe>strong{font-size:44px}
  #portfolio-guide .market-universe>strong>span{font-size:11px}
  #website.society-experience #portfolio-guide .market-universe p{font-size:12px}
  #website.society-experience #portfolio-guide .portfolio-example{font-size:12px}
  #portfolio-guide .marker-note{font-size:35px;margin:18px 0 28px;transform:rotate(-4deg)}
  #portfolio-guide .ownership-steps li{grid-template-columns:82px 1fr;gap:12px;padding-bottom:18px}
  #website.society-experience #portfolio-guide .anatomy-panel p{font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){#portfolio-guide .anatomy-object,#portfolio-guide .nft-face{transition:none}}
body.paused #portfolio-guide .anatomy-object,body.paused #portfolio-guide .nft-face{transition:none}

/* The polaroid comes out of an instant camera (owner 2026-10-13). The camera rides on the card, so it follows every
   view; the white frame and shadow move from the card to the print, which slides out of the slot and develops. */
#portfolio-guide .nft-face.has-camera{padding:0;background:none;box-shadow:none;margin-top:29%}
#portfolio-guide .nft-print{position:relative;z-index:1;padding:7px 7px 0;background:#fff;box-shadow:6px 20px 30px #14120f26}
/* The print as a real instant photo: an even border with a deeper chin, warm paper with barely rounded corners, the
   picture sunk into the frame under a faint sheen, and a shadow that lies on the page. Sizes follow the print's width. */
#portfolio-guide .nft-print{container-type:inline-size;padding:4.6% 4.6% 0;border-radius:3px;background:linear-gradient(168deg,#fffefa,#f4f1e8);box-shadow:0 1px 1px #14120f1f,0 12px 20px -8px #14120f47,10px 30px 46px -14px #14120f38}
#portfolio-guide .nft-print img{display:block}
#portfolio-guide .nft-print::after{content:'';position:absolute;top:calc(4.6cqw / .908);left:4.6%;right:4.6%;aspect-ratio:1;pointer-events:none;background:linear-gradient(128deg,#ffffff3d 0,#ffffff00 30%,#ffffff00 72%,#ffffff12 100%);box-shadow:inset 0 0 0 1px #14120f2e,inset 0 1px 7px #14120f40}
#portfolio-guide .nft-print .nft-face-caption{padding:5.4cqw 1cqw 7.4cqw;color:#3d3a35}
#portfolio-guide .nft-camera{position:absolute;z-index:2;left:-6%;right:-6%;bottom:calc(100% - 10px);aspect-ratio:3.4/1;border:2px solid var(--ink);border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#fdfbf5,#ece7d9);box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #d8d1bf,4px 4px 0 var(--ink)}
#portfolio-guide .nft-camera i{position:absolute;display:block}
#portfolio-guide .nft-camera-flash{left:5%;top:16%;width:15%;height:34%;border:1.5px solid var(--ink);border-radius:4px;background:repeating-linear-gradient(90deg,#fff 0 3px,#e4e0d4 3px 5px)}
#portfolio-guide .nft-camera-stripe{left:27%;top:0;bottom:0;width:12%;background:linear-gradient(90deg,#e8412b 0 20%,#f28a1e 20% 40%,#f7c51e 40% 60%,#5cb547 60% 80%,#2d8fd5 80%)}
#portfolio-guide .nft-camera-lens{right:10%;top:50%;width:21%;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;transform:translateY(-54%);background:radial-gradient(circle at 36% 32%,#ffffffd9 0 5%,#fff0 11%),radial-gradient(circle at 64% 70%,#7fb6ff38 0 9%,#7fb6ff00 17%),radial-gradient(circle,#4a4844 0 18%,#14120f 22% 48%,#3b3934 52% 64%,#14120f 68%);box-shadow:0 0 0 3px #e4dfd1,0 0 0 4.5px var(--ink)}
/* The shutter button on the top edge. */
#portfolio-guide .nft-camera-shutter{right:15%;top:-9px;width:10%;height:9px;border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background:#e8412b}
#portfolio-guide .nft-camera-slot{left:9%;right:9%;bottom:-2px;height:8px;border-radius:3px 3px 0 0;background:var(--ink)}
#portfolio-guide .nft-print.is-waiting{transform:translateY(-72%);clip-path:inset(72% -80px -100px -80px)}
#portfolio-guide .nft-print.is-ejecting{animation:print-eject 1.4s cubic-bezier(.25,.75,.3,1) both}
#portfolio-guide .nft-print.is-ejecting img{animation:print-develop 2.8s ease-out .5s both}
@keyframes print-eject{from{transform:translateY(-72%);clip-path:inset(72% -80px -100px -80px)}to{transform:none;clip-path:inset(-20px -80px -100px -80px)}}
@keyframes print-develop{from{filter:saturate(0) brightness(1.6) contrast(.4)}to{filter:none}}
@media(prefers-reduced-motion:reduce){#portfolio-guide .nft-print.is-waiting,#portfolio-guide .nft-print.is-ejecting{transform:none;clip-path:none;animation:none}#portfolio-guide .nft-print.is-ejecting img{animation:none}}
#website #portfolio-guide .nft-camera-logo{position:absolute;left:47%;top:50%;width:14%;height:auto;transform:translateY(-52%);fill:var(--ink);stroke:none}