/* VRAJHNA DOSSIER SYSTEM — Mosby-grade case files, pure greyscale, self-contained.
   Every page rule lives here. No tailwind dependence for critical styles. */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;color:#f5f5f5;font-family:'IBM Plex Mono',monospace;-webkit-font-smoothing:antialiased}
a{color:inherit}
.cond{font-family:'Anton',sans-serif}.serif2{font-family:'Libre Baskerville',serif}.mono{font-family:'IBM Plex Mono',monospace}.type{font-family:'Special Elite'}
#preloader{position:fixed;inset:0;background:#000;z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.topbar{background:#111;border-bottom:1px solid rgba(255,255,255,.1)}
.topbar-in{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.26em;color:rgba(255,255,255,.5)}
#reset,.btn-ghost{background:none;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.25);padding:4px 12px;font-family:'IBM Plex Mono';font-size:8px;letter-spacing:.24em;cursor:pointer;text-decoration:none;display:inline-block}
#reset:hover,.btn-ghost:hover{background:#fff;color:#000}
h1.case-title{color:#fff;line-height:1;max-width:1200px;margin:0 auto;padding:0 16px 16px;font-size:clamp(44px,9vw,104px)}
.board{background:#2b2b2b;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px}
.cols{max-width:1200px;margin:0 auto;display:flex}
main.dossier-col{flex:1;padding:32px 12px 32px 16px;min-width:0}
.paper{background:#f2f0eb;color:#161616;position:relative;padding:32px 24px 32px 56px}
.paper::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:12px;background-image:radial-gradient(circle,#2b2b2b 4.5px,transparent 5px);background-size:12px 64px;background-repeat:repeat-y}
.essayrow{display:flex;gap:24px;flex-wrap:wrap}
.portrait{flex:0 0 150px}
.photocard{background:#fff;border:1px solid rgba(0,0,0,.2);padding:4px;transform:rotate(-1.5deg);position:relative}
.cap{font-size:7px;letter-spacing:.14em;opacity:.6;margin-top:4px;padding:0 2px 2px}
.meta{font-size:8px;line-height:2;margin-top:14px;opacity:.7}
.essay{flex:1;min-width:240px}
.essay p{font-family:'Libre Baskerville',serif;font-size:16px;line-height:1.65;color:#161616}
.essay p+p{margin-top:14px}
.essay p.dropcap::first-letter{font-family:'Anton';font-size:3.4em;float:left;line-height:.85;padding-right:10px;color:#161616}
#cluster{position:relative;height:1020px;margin-top:30px}
.piece{position:absolute;box-shadow:0 16px 44px rgba(0,0,0,.4);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.piece:active{cursor:grabbing}
.torn{clip-path:polygon(0 3%,4% 0,96% 1%,100% 4%,99% 95%,95% 100%,5% 99%,0 96%)}
.lbl{padding:16px}
.lbl h4{font-family:'Anton';font-size:15px;letter-spacing:.02em}
.lbl p{font-family:'Special Elite';font-size:11px;line-height:1.5;margin-top:8px}
.lbl .pr{font-family:'IBM Plex Mono';font-size:10px;margin-top:8px}
.clip{position:absolute;top:-15px;width:13px;height:36px;border:2px solid #8a8a8a;border-bottom:0;border-radius:7px 7px 0 0;z-index:2}
.tape{position:absolute;width:74px;height:20px;background:rgba(244,244,242,.9);box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:2}
.pillrow{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pill{background:#f4f4f2;color:#111;border-radius:999px;font-size:9px;letter-spacing:.14em;padding:8px 16px}
.sizeline{font-size:9px;letter-spacing:.14em;opacity:.55;color:#161616}
.fullcase{font-size:9px;letter-spacing:.14em;background:#161616;color:#fff;padding:8px 16px;text-decoration:none}
.nextbar{display:flex;margin-top:24px;background:#f4f4f2;color:#111;padding:20px;justify-content:space-between;align-items:center;text-decoration:none;flex-wrap:wrap;gap:12px;min-width:0}
.nextbar:hover{opacity:.92}
.nextbar span.n{font-family:'Anton';font-size:30px;min-width:0;overflow-wrap:anywhere}
@media(max-width:899px){.nextbar span.n{font-size:22px}.nextbar{padding:16px}}
.nextbar span.b{font-size:10px;letter-spacing:.2em;background:#111;color:#fff;padding:10px 20px}
.joinstrip{margin-top:24px;border:1px solid rgba(255,255,255,.15);padding:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.joinstrip p{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.joinstrip form{display:flex;gap:8px;width:100%;max-width:340px}
.joinstrip input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);padding:8px 2px;font-family:'IBM Plex Mono';font-size:11px;color:#fff;outline:none}
.joinstrip input::placeholder{color:rgba(255,255,255,.3)}
.joinstrip button{background:none;color:#fff;border:1px solid rgba(255,255,255,.4);padding:8px 20px;font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.2em;cursor:pointer}
.joinstrip button:hover{background:#fff;color:#000}
#notify-msg{font-size:10px;margin-top:8px;display:none;color:rgba(255,255,255,.7)}
aside.tabs{display:none;flex-direction:column;gap:4px;padding:32px 8px 32px 0}
.tab{writing-mode:vertical-rl;font-size:9px;letter-spacing:.24em;padding:14px 7px;border-radius:0 9px 9px 0;text-decoration:none}
footer{border-top:1px solid rgba(255,255,255,.1)}
footer div{max-width:1200px;margin:0 auto;padding:16px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
/* fixed house bar — brand always on top, breadcrumbs below */
#house-bar{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(13,13,13,.96);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.14)}
#house-bar .hb-top{max-width:1200px;margin:0 auto;padding:9px 16px 7px;display:flex;align-items:center;justify-content:space-between}
#house-bar .hb-brand{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.22em;color:#fff;text-decoration:none}
#house-bar .hb-icons{display:flex;gap:14px}
#house-bar .hb-icons a{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.65);text-decoration:none}
#house-bar .hb-crumbs{border-top:1px solid rgba(255,255,255,.08);overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding:7px 16px;display:flex;gap:16px}
#house-bar .hb-crumbs a{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.22em;color:rgba(255,255,255,.45);text-decoration:none;flex:0 0 auto}
#house-bar .hb-crumbs a.on{color:#fff;border-bottom:1px solid #fff;padding-bottom:2px}
body{padding-top:82px}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:#fff;color:#000;padding:12px 24px;font-size:10px;letter-spacing:.14em;opacity:0;transition:all .3s;z-index:50}
#toast.show{transform:translate(-50%,0);opacity:1}
/* case index grid (shop) */
.casegrid{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.casefile{width:calc(33.333% - 10px);min-width:200px;background:#f2f0eb;color:#161616;padding:14px 14px 12px;position:relative;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .3s}
.casefile:hover{transform:translateY(-4px) rotate(0deg) !important}
.casefile h4{font-family:'Anton';font-size:17px;line-height:1.1}
.casefile .ref{font-size:8px;letter-spacing:.2em;opacity:.55;margin-top:6px}
.casefile .pr{font-size:12px;margin-top:8px}
.casefile .stocktag{display:inline-block;font-size:8px;letter-spacing:.14em;background:#161616;color:#fff;padding:3px 8px;margin-top:8px}
@media(min-width:900px){aside.tabs{display:flex}main.dossier-col{padding-right:0}}
@media(max-width:899px){
  html,body{overflow-x:hidden}
  main.dossier-col{padding:20px 10px 20px 8px}
  .paper{padding:20px 14px 20px 38px}
  .essayrow{flex-direction:column;gap:16px}
  .portrait{flex:none;max-width:210px}
  .essay p{font-size:15px}
  h1.case-title{font-size:clamp(40px,13vw,64px) !important}
  aside.tabs{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:60;flex-direction:row;gap:0;padding:0;background:#0d0d0d;border-top:1px solid rgba(255,255,255,.18);overflow-x:auto;-webkit-overflow-scrolling:touch}
  aside.tabs .tab{writing-mode:horizontal-tb !important;flex:1 0 auto;text-align:center;border-radius:0 !important;padding:13px 10px;white-space:nowrap;border:0 !important;border-right:1px solid rgba(255,255,255,.08) !important}
  body{padding-bottom:48px}
  #toast{bottom:62px}
  img,svg,video{max-width:100%;height:auto}
  .frame4x5 img,.frame4x5 svg{height:100% !important}
  #cluster{height:auto !important;display:flex;flex-direction:column;gap:16px}
  #cluster .piece{position:static !important;width:100% !important}
}
.frame4x5{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#e4e4e1}
.frame4x5 img,.frame4x5 svg{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;object-position:top}
.frame4x5 img{filter:grayscale(1) contrast(1.06)}
.essay{min-width:0}
.essayrow{align-items:flex-start}
@media(max-width:640px){
  #cluster .piece{box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .paper{padding:24px 16px 24px 40px}
  .casefile{width:100%}
  .nextbar span.n{font-size:22px}
}

/* ============ JS-COMMERCE SHIM (store.js templates use these utilities;
   dossier.css has no Tailwind — this subset keeps bag/invoice/orders/account
   layouts intact without a framework) ============ */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none !important}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-\[5px\]{gap:5px}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-\[1fr_60px_90px_90px\]{grid-template-columns:1fr 60px 90px 90px}
.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.top-2{top:8px}.top-3{top:12px}.right-2{right:8px}.right-3{right:12px}.top-1\/2{top:50%}.-translate-y-1\/2{transform:translateY(-50%)}.bottom-2{bottom:8px}
.w-full{width:100%}.h-full{height:100%}.w-2{width:8px}.h-2{height:8px}.w-3{width:12px}.h-3{height:12px}.w-6{width:24px}.w-7{width:28px}.h-7{height:28px}.w-9{width:36px}.h-9{height:36px}.w-12{width:48px}.h-12{height:48px}.h-16{height:64px}.w-\[120px\]{width:120px}.w-\[86px\]{width:86px}.h-\[160px\]{height:160px}.h-\[114px\]{height:114px}.w-\[72px\]{width:72px}.h-\[1px\]{height:1px}.h-6{height:24px}
.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}
.border{border-width:1px}.border-2{border-width:2px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-dashed{border-style:dashed}
.border-black{border-color:#000}.border-black\/5{border-color:rgba(0,0,0,.05)}.border-black\/10{border-color:rgba(0,0,0,.1)}.border-black\/20{border-color:rgba(0,0,0,.2)}
.border-\[\#141310\]{border-color:#141310}.border-\[\#141310\]\/10{border-color:rgba(20,19,16,.1)}.border-\[\#141310\]\/15{border-color:rgba(20,19,16,.15)}.border-\[\#141310\]\/20{border-color:rgba(20,19,16,.2)}.border-\[\#141310\]\/\[0\.08\]{border-color:rgba(20,19,16,.08)}
.border-white{border-color:#fff}.border-amber-200{border-color:#fde68a}.border-\[\#E9B44C\]{border-color:#E9B44C}
.divide-y>*+*{border-top-width:1px}.divide-black\/5>*+*{border-top-color:rgba(0,0,0,.05)}.divide-\[\#141310\]\/10>*+*{border-top-color:rgba(20,19,16,.1)}
.bg-black{background:#000}.bg-white{background:#fff}.bg-\[\#141310\]{background:#141310}.bg-\[\#141310\]\/10{background:rgba(20,19,16,.1)}.bg-\[\#9B1B20\]{background:#9B1B20}.bg-\[\#E9B44C\]{background:#E9B44C}.bg-\[\#E9B44C\]\/40{background:rgba(233,180,76,.4)}.bg-\[\#edeae3\]{background:#edeae3}.bg-\[\#f7f7f5\]{background:#f7f7f5}.bg-\[\#fcfcfc\]{background:#fcfcfc}.bg-\[\#FDF6E3\]{background:#FDF6E3}.bg-amber-50{background:#fffbeb}.bg-amber-600{background:#d97706}.bg-green-500{background:#22c55e}.bg-green-600{background:#16a34a}
.text-white{color:#fff}.text-black{color:#000}.text-\[\#141310\]{color:#141310}.text-\[\#FDF6E3\]{color:#FDF6E3}.text-green-600{color:#16a34a}.text-green-700{color:#15803d}
.text-\[6px\]{font-size:6px}.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[26px\]{font-size:26px}.text-\[34px\]{font-size:34px}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.tracking-\[0\.04em\]{letter-spacing:.04em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-widest{letter-spacing:.1em}
.font-medium{font-weight:500}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.line-through{text-decoration:line-through}
.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}
.mb-2{margin-bottom:8px}.ml-2{margin-left:8px}.ml-auto{margin-left:auto}
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}.p-\[6px\]{padding:6px}
.px-1{padding-left:4px;padding-right:4px}.px-1\.5{padding-left:6px;padding-right:6px}.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}.px-6{padding-left:24px;padding-right:24px}.px-8{padding-left:32px;padding-right:32px}.px-10{padding-left:40px;padding-right:40px}
.py-0\.5{padding-top:2px;padding-bottom:2px}.py-1{padding-top:4px;padding-bottom:4px}.py-1\.5{padding-top:6px;padding-bottom:6px}.py-2{padding-top:8px;padding-bottom:8px}.py-2\.5{padding-top:10px;padding-bottom:10px}.py-3{padding-top:12px;padding-bottom:12px}.py-3\.5{padding-top:14px;padding-bottom:14px}.py-4{padding-top:16px;padding-bottom:16px}.py-6{padding-top:24px;padding-bottom:24px}.py-8{padding-top:32px;padding-bottom:32px}.py-16{padding-top:64px;padding-bottom:64px}.py-20{padding-top:80px;padding-bottom:80px}
.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pt-4{padding-top:16px}.pt-\[16px\]{padding-top:16px}.pb-0\.5{padding-bottom:2px}.pb-2{padding-bottom:8px}.pb-4{padding-bottom:16px}.pb-6{padding-bottom:24px}.pb-10{padding-bottom:40px}.pl-3{padding-left:12px}.pl-6{padding-left:24px}
.space-y-0>*+*{margin-top:0}.space-y-1\.5>*+*{margin-top:6px}.space-y-4>*+*{margin-top:16px}
.object-cover{object-fit:cover}.object-top{object-position:top}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.outline-none{outline:none}.transition{transition:all .2s}
.leading-none{line-height:1}.leading-relaxed{line-height:1.7}
.aspect-\[3\/4\]{aspect-ratio:3/4}.max-w-\[1600px\]{max-width:1600px}.mx-auto{margin-left:auto;margin-right:auto}.min-w-0{min-width:0}.min-h-\[70vh\]{min-height:70vh}
.sticky{position:sticky}.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}
.col-span-4{grid-column:span 4/span 4}
.vrajhna-serif,.font-display{font-family:'Libre Baskerville',Georgia,serif}.font-type{font-family:'Special Elite','Courier New',monospace}
button[class*="hover:"]:hover{filter:brightness(.92)}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-10{padding:40px}.md\:px-8{padding-left:32px;padding-right:32px}.md\:pt-\[20px\]{padding-top:20px}.md\:gap-10{gap:40px}.md\:gap-4{gap:16px}.md\:text-right{text-align:right}.md\:w-\[300px\]{width:300px}.md\:inline{display:inline}.md\:hidden{display:none}.md\:flex{display:flex}.md\:block{display:block}.md\:aspect-\[3\/3\.6\]{aspect-ratio:3/3.6}}