/* Taste Cabinet — faithful port of claude-export/Taste Cabinet.dc.html
   Almost all visual styling lives inline in main.js (as in the source export).
   This sheet carries only the @font-face, global resets, keyframes, and
   scrollbar treatment that the source declared in its <helmet> block. */

@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Satoshi',sans-serif;background:#0e0d0c;color:#f4efe6}
::selection{background:#FF6D0C;color:#0e0d0c}

@keyframes drift{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes pulse{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-16}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.tc-scroll::-webkit-scrollbar{width:10px;height:10px}
.tc-scroll::-webkit-scrollbar-thumb{background:#3a352e;border-radius:9999px;border:3px solid transparent;background-clip:content-box}

/* one-shot light catching the glass as an object settles into the vitrine */
@keyframes glass-sweep{from{transform:translateX(-160%) skewX(-12deg)}to{transform:translateX(360%) skewX(-12deg)}}
.tc-glass-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:55%;pointer-events:none;z-index:4;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.0) 20%,rgba(255,246,228,0.45) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-160%) skewX(-12deg);animation:glass-sweep .85s cubic-bezier(0.22,1,0.36,1) forwards}

/* range input — match the orange accent used in the source */
input[type=range]{accent-color:#FF6D0C}

.tc-action{-webkit-tap-highlight-color:transparent}
.tc-action:focus-visible{outline:2px solid #FF6D0C;outline-offset:4px}
.tc-mobile-intro{display:none}

/* "the space breathes" — layered breath for emptiness/atmosphere specimens (Lively only).
   The vessel pixels never move; the NEGATIVE SPACE around it is what's alive:
   a vignette that swells inward and recedes, plus a soft presence-glow breathing
   in counter-rhythm so the object seems to exhale light. */
.spec-void{position:absolute;inset:0;pointer-events:none;z-index:1}
/* base image itself breathes light — the cue that actually reads against a near-black field */
.v-base{animation:base-breathe 8s ease-in-out infinite;will-change:filter}
.spec-void .v-vignette{position:absolute;inset:-14%;transform-origin:50% 60%;
  background:radial-gradient(circle at 50% 60%,transparent 28%,rgba(4,3,2,0) 36%,rgba(4,3,2,0.8) 86%);
  animation:void-breathe 8s ease-in-out infinite;will-change:transform,opacity}
.spec-void .v-glow{position:absolute;left:50%;top:60%;width:88%;height:66%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,236,206,0.34),rgba(255,236,206,0.06) 60%,rgba(255,236,206,0) 82%);
  filter:blur(14px);mix-blend-mode:screen;animation:glow-breathe 8s ease-in-out infinite;will-change:opacity,transform}
/* inhale (0%): light recedes, dark closes in · exhale (50%): whole field lifts, glow blooms */
@keyframes base-breathe{0%,100%{filter:brightness(0.86) contrast(1.03)}50%{filter:brightness(1.16) contrast(0.99)}}
@keyframes void-breathe{0%,100%{transform:scale(1);opacity:0.98}50%{transform:scale(1.18);opacity:0.55}}
@keyframes glow-breathe{0%,100%{opacity:0.28;transform:translate(-50%,-50%) scale(0.88)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}

/* interactive specimens — visitor operates the artifact (wired in wireDetail) */
.spec-int{font-family:'JetBrains Mono',monospace}
/* Norman — affordance + feedback */
.spec-int .nmb{position:relative;width:164px;height:164px;border-radius:50%;border:none;cursor:pointer;font-family:'Fraunces',serif;font-size:21px;color:#4a3d28;background:radial-gradient(circle at 42% 34%,#efe7d8,#cdbfa4 62%,#a2906f);box-shadow:0 14px 22px -6px rgba(0,0,0,.7),0 0 0 6px rgba(20,16,10,.6),0 0 0 7px rgba(201,146,58,.28);transition:transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .25s,filter .2s,background .3s}
.spec-int .nmb:hover{filter:brightness(1.07)}
.spec-int .nmb:active{transform:translateY(6px) scale(.985)}
.spec-int .nmb.armed{animation:nm-pulse 2.4s ease-in-out infinite}
.spec-int .nmb.on{background:radial-gradient(circle at 42% 34%,#ffd9ad,#ff9a4d 55%,#e5620a);color:#3a1e07;box-shadow:0 10px 24px -6px rgba(255,109,12,.55),0 0 0 6px rgba(20,16,10,.6),0 0 0 7px rgba(255,109,12,.5)}
@keyframes nm-pulse{0%,100%{box-shadow:0 14px 22px -6px rgba(0,0,0,.7),0 0 0 6px rgba(20,16,10,.6),0 0 0 7px rgba(201,146,58,.28)}50%{box-shadow:0 14px 22px -6px rgba(0,0,0,.7),0 0 0 6px rgba(20,16,10,.6),0 0 0 11px rgba(201,146,58,.5)}}
.spec-int .nmr{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:calc(100% - 44px);font-size:12px;line-height:1.55;color:#cfc5b3;text-align:center}
.spec-int .nmr b{color:#FF6D0C}
.spec-int .nm-ripple{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,109,12,.7);pointer-events:none;animation:nm-rip .65s ease-out forwards}
@keyframes nm-rip{from{transform:scale(1);opacity:.85}to{transform:scale(2);opacity:0}}
/* Torres — opportunity/solution tree */
.spec-int .ttier{fill:#c9bda0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;text-transform:uppercase}
.spec-int .tnode rect{fill:#191510;stroke:#6a5f49;stroke-width:1.2;transition:.35s}
.spec-int .tnode text{fill:#d8cebb;font-family:'JetBrains Mono',monospace;font-size:12.5px;transition:.35s}
.spec-int .tline{stroke:#584e3b;stroke-width:1.4;transition:.35s}
.spec-int .tnode.lit rect{fill:#2a1b0b;stroke:#FF6D0C;stroke-width:2}
.spec-int .tnode.lit text{fill:#ffd9ad}
.spec-int .tline.lit{stroke:#FF6D0C;stroke-width:2.6}
.spec-int .dim{opacity:.15}
.spec-int .tleaf,.spec-int .tout{cursor:pointer}
.spec-int .trr{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:calc(100% - 44px);font-size:12px;line-height:1.55;color:#cfc5b3;text-align:center}
.spec-int .trr b{color:#FF6D0C}
/* Von Oech — generate then choose */
.spec-int .vfield{position:relative;flex:1;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(201,146,58,.1)}
.spec-int .vorb{position:absolute;width:74px;height:74px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle at 40% 34%,#f7f0e2,#d3c6ac 70%);color:#4a3d28;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:17px;cursor:pointer;box-shadow:0 0 24px rgba(255,240,214,.16);transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .5s,background .4s,box-shadow .4s}
.spec-int .vorb.in{transform:translate(-50%,-50%) scale(1)}
.spec-int .vorb:hover{box-shadow:0 0 30px rgba(255,240,214,.28)}
.spec-int .vorb.chosen{background:radial-gradient(circle at 40% 34%,#ffd9ad,#ff8b3a 70%);color:#3a1e07;transform:translate(-50%,-50%) scale(1.42);box-shadow:0 0 40px rgba(255,109,12,.6);z-index:3}
.spec-int .vorb.faded{opacity:.2;transform:translate(-50%,-50%) scale(.72)}
.spec-int .vbar{display:flex;gap:8px;justify-content:center}
.spec-int .vbar button{font-family:'JetBrains Mono',monospace;font-size:11px;padding:7px 14px;border-radius:7px;background:transparent;color:#c8bda9;border:1px solid rgba(154,143,120,.42);cursor:pointer;transition:.2s}
.spec-int .vbar button:hover{border-color:rgba(201,146,58,.65);color:#efe6d4}
.spec-int .vbar button:disabled{opacity:.32;cursor:default}
.spec-int .vbar .vreset{color:#9a8f78;border-color:rgba(154,143,120,.26)}
.spec-int .vread{font-size:12px;color:#cfc5b3;text-align:center;padding:0 10px;min-height:18px}
.spec-int .vread b{color:#FF6D0C}
/* Lupton — flat block resolves into a ranked reading path */
.spec-int .lz{display:flex;flex-direction:column;gap:15px;width:100%;max-width:320px}
.spec-int .lz-row{display:flex;align-items:center;gap:13px}
.spec-int .lz-num{flex:none;width:23px;height:23px;border-radius:50%;border:1px solid #FF6D0C;color:#FF6D0C;font-family:'JetBrains Mono',monospace;font-size:11px;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .45s,transform .45s}
.spec-int .lz-el{font-family:'Satoshi',sans-serif;font-size:15px;font-weight:400;line-height:1.32;color:#b3a891;transition:font-size .5s cubic-bezier(.2,.8,.3,1),font-weight .5s,color .5s,letter-spacing .5s}
.spec-int .lz.on .lz-num{opacity:1;transform:scale(1)}
.spec-int .lz.on .lz-title{font-family:'Fraunces',serif;font-size:27px;font-weight:700;letter-spacing:-.01em;color:#f3ecdd}
.spec-int .lz.on .lz-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a8f78}
.spec-int .lz.on .lz-body{font-size:13.5px;color:#b8ae9c}
.spec-int .lz.on .lz-cta{font-size:15px;font-weight:700;color:#FF6D0C}
.spec-int .lz-toggle{font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 18px;border-radius:7px;background:transparent;color:#c8bda9;border:1px solid rgba(201,146,58,.5);cursor:pointer;transition:.2s}
.spec-int .lz-toggle:hover{border-color:rgba(201,146,58,.8);color:#efe6d4}
.spec-int .lrr{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:calc(100% - 44px);font-size:12px;line-height:1.55;color:#cfc5b3;text-align:center}
.spec-int .lrr b{color:#FF6D0C}
/* Muller-Brockmann — scatter snaps to a grid */
.spec-int .mg{position:relative;width:100%;max-width:320px;aspect-ratio:1/1;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(201,146,58,.12)}
.spec-int .mg-guides span{position:absolute;top:4%;bottom:4%;width:1px;background:#FF6D0C;opacity:0;transition:opacity .5s}
.spec-int .mg-guides span:nth-child(1){left:28%}.spec-int .mg-guides span:nth-child(2){left:52%}.spec-int .mg-guides span:nth-child(3){left:76%}
.spec-int .mg.on .mg-guides span{opacity:.32}
.spec-int .mg-blk{position:absolute;background:#e3dac8;border-radius:3px;transition:left .55s cubic-bezier(.2,.8,.3,1),top .55s cubic-bezier(.2,.8,.3,1),width .55s cubic-bezier(.2,.8,.3,1),height .55s cubic-bezier(.2,.8,.3,1),transform .55s cubic-bezier(.2,.8,.3,1)}
.spec-int .mg-blk.accent{background:#FF6D0C}
.spec-int .b1{left:7%;top:7%;width:58%;height:15%;transform:rotate(-3deg)}
.spec-int .b2{left:46%;top:29%;width:40%;height:34%;transform:rotate(4deg)}
.spec-int .b3{left:6%;top:41%;width:31%;height:9%;transform:rotate(-2deg)}
.spec-int .b4{left:11%;top:63%;width:52%;height:8%;transform:rotate(3deg)}
.spec-int .b5{left:59%;top:75%;width:31%;height:11%;transform:rotate(-5deg)}
.spec-int .b6{left:70%;top:13%;width:24%;height:19%;transform:rotate(5deg)}
.spec-int .mg.on .mg-blk{transform:rotate(0)}
.spec-int .mg.on .b1{left:4%;top:6%;width:92%;height:13%}
.spec-int .mg.on .b2{left:4%;top:25%;width:44%;height:40%}
.spec-int .mg.on .b3{left:52%;top:25%;width:44%;height:11%}
.spec-int .mg.on .b4{left:52%;top:40%;width:44%;height:11%}
.spec-int .mg.on .b5{left:52%;top:55%;width:44%;height:10%}
.spec-int .mg.on .b6{left:4%;top:72%;width:92%;height:12%}
.spec-int .mg-toggle{font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 18px;border-radius:7px;background:transparent;color:#c8bda9;border:1px solid rgba(201,146,58,.5);cursor:pointer;transition:.2s}
.spec-int .mg-toggle:hover{border-color:rgba(201,146,58,.8);color:#efe6d4}
.spec-int .mrr{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:calc(100% - 44px);font-size:12px;line-height:1.55;color:#cfc5b3;text-align:center}
.spec-int .mrr b{color:#FF6D0C}
/* Yablonski — many equal choices collapse to one next move */
.spec-int .yl{display:flex;flex-wrap:wrap;gap:9px;align-content:center;justify-content:center;width:100%;max-width:312px;padding:6px 0}
.spec-int .yl-chip{height:27px;border-radius:14px;background:#e3dac8;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#5a5142;white-space:nowrap;overflow:hidden;transition:opacity .5s,transform .55s cubic-bezier(.2,.8,.3,1),background .5s,color .5s}
.spec-int .yl-chip:nth-child(4n+1){width:58px}.spec-int .yl-chip:nth-child(4n+2){width:86px}.spec-int .yl-chip:nth-child(4n+3){width:50px}.spec-int .yl-chip:nth-child(4n){width:72px}
.spec-int .yl-chip.pick{width:auto;padding:0 22px;overflow:visible}
.spec-int .yl.on .yl-chip{opacity:.12;transform:scale(.8)}
.spec-int .yl.on .yl-chip.pick{opacity:1;transform:scale(1.28);background:#FF6D0C;color:#3a1e07;position:relative;z-index:2;box-shadow:0 10px 22px rgba(255,109,12,.3),0 0 0 6px #16100a}
.spec-int .yl-toggle{font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 18px;border-radius:7px;background:transparent;color:#c8bda9;border:1px solid rgba(201,146,58,.5);cursor:pointer;transition:.2s}
.spec-int .yl-toggle:hover{border-color:rgba(201,146,58,.8);color:#efe6d4}
.spec-int .yrr{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:calc(100% - 44px);font-size:12px;line-height:1.55;color:#cfc5b3;text-align:center}
.spec-int .yrr b{color:#FF6D0C}

/* ---------------------------------------------------------------------------
   Responsive — phones / narrow tablets. Inline styles carry the desktop
   layout, so these overrides use class hooks + !important.
--------------------------------------------------------------------------- */
@media (max-width: 820px){
  .tc-detail-grid{grid-template-columns:minmax(0,1fr) !important;gap:26px !important}
  .tc-vitrine{min-height:0 !important;padding:26px 18px 60px !important}
  #tc-specimen{width:100% !important;max-width:420px !important}
  .tc-hero{font-size:34px !important}
}
@media (max-width: 560px){
  #tc-header{padding-left:14px !important;padding-right:14px !important;gap:8px !important}
  .tc-brand-title{font-size:17px !important}
  .tc-brand-sub{display:none !important}
  .tc-nav{display:none !important}
  .tc-hero{font-size:30px !important}
  .tc-page{padding-left:18px !important;padding-right:18px !important}
  .tc-atlas #tc-field{overflow-y:auto !important;overflow-x:hidden !important}
  .tc-atlas-world{position:relative !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;margin:0 !important;transform:none !important}
  .tc-atlas-stage{position:relative !important;inset:auto !important;width:100% !important;height:auto !important;transform:none !important}
  .tc-atlas #tc-arts{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding:34px 18px 42px}
  .tc-mobile-intro{display:block;grid-column:1/-1;padding:0 2px 2px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;color:#FF6D0C;text-transform:uppercase}
  .tc-mobile-intro p{max-width:320px;margin:8px 0 0;font-family:'Satoshi',sans-serif;font-size:14px;line-height:1.5;letter-spacing:0;color:#cfc5b3;text-transform:none}
  .tc-art-card{position:relative !important;left:auto !important;top:auto !important;width:100% !important;transform:none !important;animation:none !important;align-self:stretch}
  .tc-art-card > div{height:100%}
  .tc-atlas #tc-threads,.tc-atlas-hint,.tc-atlas-count{display:none !important}
}