/* Petty Crimes — experience layer. Evidence-room editorial: warm paper, ink, police red, ochre lamp light. */
:root{--ochre:#c99a4b;--lamp:#f1d9a4;--slate:#34413f;--paper-2:#ebe4d4}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.header{position:sticky;top:0;z-index:30;background:#f3efe5e8;backdrop-filter:blur(8px);transition:padding .3s}
.header.x-compact{padding-top:14px;padding-bottom:14px}
.x-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:40}

/* Hero type entrance */

/* Hero art: height chart, tilt, stamps */
.hero-frame{cursor:crosshair;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;animation:x-hang 1.2s .2s cubic-bezier(.3,1.4,.4,1) backwards}
@keyframes x-hang{from{opacity:0;transform:translateY(-40px) rotate(-6deg)}to{opacity:1;transform:rotate(2.3deg)}}
.hero-frame .guilty-stamp{animation:x-slam .45s .3s cubic-bezier(.5,1.8,.5,1) both}
@keyframes x-slam{from{opacity:.8;transform:scale(1.2) rotate(-16deg)}to{opacity:.8;transform:rotate(-10deg)}}
.red-label:hover{transform:rotate(-2deg) scale(1.05)}
.x-stamps{position:absolute;inset:0;pointer-events:none;z-index:3}
.x-stamp{position:absolute;font:700 22px/.9 var(--display);color:var(--red);border:2px solid var(--red);padding:6px 8px 3px;letter-spacing:.5px;text-align:center;white-space:nowrap;background:#f4efe2cc;mix-blend-mode:multiply;animation:x-stampin .35s cubic-bezier(.5,1.8,.5,1) both}
.x-stamp.ink-slate{color:var(--slate);border-color:var(--slate)}
@keyframes x-stampin{from{opacity:0;transform:translate(-50%,-50%) scale(2) rotate(var(--r))}to{opacity:.88;transform:translate(-50%,-50%) rotate(var(--r))}}

/* Ticker gets a second, opposite tape */
.ticker{margin:10px 0;position:relative;z-index:2;box-shadow:0 8px 20px #3a1a1222}
.ticker>div{animation-duration:var(--x-speed,38s)}

/* Scroll reveals */
.x-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.x-reveal.x-in{opacity:1;transform:none}

/* Process: case-file cards */
.steps article{position:relative;padding:0 0 26px;transition:transform .35s}
.steps article:hover{transform:translateY(-6px)}
.steps article:before{content:attr(data-x-n);position:absolute;right:0;top:34px;font:700 120px/.8 var(--display);color:#b83a2c14;pointer-events:none}
.steps article .step-top>span:last-child{transition:transform .3s}
.steps article:hover .step-top>span:last-child{transform:rotate(45deg);color:var(--red)}

/* Gallery tilt */
.case-card .gallery-frame{will-change:transform}
.case-card .x-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),#fff6e040,transparent 45%);opacity:0;transition:opacity .3s}
.case-card:hover .x-glare{opacity:1}
.case-card .case-arrow{transition:transform .3s}
.case-card:hover .case-arrow{transform:translate(4px,-4px);color:var(--red)}

/* Interrogation */
.x-interrogation{background:var(--slate);color:var(--paper);padding-top:90px;padding-bottom:96px;position:relative;overflow:hidden}
.x-interrogation .eyebrow{color:var(--lamp)}
.x-int-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.x-int-head .eyebrow{grid-column:1/-1}
.x-int-head h2 em{color:var(--lamp)}
.x-int-head>p:last-child{font-size:13px;line-height:1.6;color:#c9cbbf;max-width:260px}
.x-int-board{display:grid;grid-template-columns:240px 1fr;gap:28px;margin-top:46px}
.x-int-suspects{display:flex;flex-direction:column;gap:10px}
.x-suspect{display:flex;align-items:center;gap:13px;padding:10px;border:1px solid #ffffff22;text-align:left;transition:background .25s,border-color .25s,transform .25s}
.x-suspect:hover{transform:translateX(4px);border-color:#ffffff55}
.x-suspect img{width:54px;height:64px;object-position:center 30%;filter:grayscale(.6)}
.x-suspect b{display:block;font:700 22px var(--display)}
.x-suspect small{font:8px var(--mono);letter-spacing:1px;color:#aeb2a6}
.x-suspect.is-on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.x-suspect.is-on img{filter:none}.x-suspect.is-on small{color:var(--muted)}
.x-int-room{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto auto;gap:18px 28px;background:#2a3432;border:1px solid #ffffff1c;padding:28px;overflow:hidden}
.x-lamp{position:absolute;left:-10%;top:-40%;width:80%;height:160%;background:radial-gradient(ellipse at 50% 20%,#f1d9a438,transparent 60%);pointer-events:none;transform-origin:50% 0;animation:x-swing 7s ease-in-out infinite alternate}
@keyframes x-swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.x-int-portrait{grid-row:1/4;margin:0;position:relative;background:#f4efe2;padding:10px;transform:rotate(-1.5deg);box-shadow:0 18px 30px #0005}
.x-int-portrait img{aspect-ratio:3/4;object-position:center 30%;transition:transform .3s}
.x-int-portrait.x-shake img{animation:x-shake .45s}
@keyframes x-shake{25%{transform:translateX(-5px) rotate(-1deg)}50%{transform:translateX(4px) rotate(1deg)}75%{transform:translateX(-2px)}}
.x-int-portrait figcaption{display:flex;justify-content:space-between;color:var(--ink);font:700 20px var(--display);padding:10px 2px 2px}
.x-rec{font:9px var(--mono);display:flex;align-items:center;gap:6px;color:var(--red)}
.x-rec i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:x-blink 1.6s steps(1) infinite}
@keyframes x-blink{50%{opacity:.25}}
.x-transcript{position:relative;min-height:190px;max-height:240px;overflow:auto;font:13px/1.65 var(--mono);background:#f4efe2;color:var(--ink);padding:18px 20px;box-shadow:inset 0 0 0 1px #c8bfaa}
.x-transcript p{margin-bottom:10px}
.x-transcript .x-q{color:var(--muted)}
.x-transcript .x-a span{background:#23241f12}
.x-questions{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.x-questions button{border:1px solid #ffffff40;padding:11px 13px;font-size:12px;transition:background .2s,color .2s,transform .2s}
.x-questions button:hover{background:var(--lamp);color:var(--ink);transform:translateY(-2px)}
.x-questions button:disabled{opacity:.4;cursor:default;transform:none}
.x-patience{position:relative;display:flex;align-items:center;gap:12px}
.x-patience .micro{color:#aeb2a6;white-space:nowrap}
.x-meter{flex:1;height:6px;background:#ffffff1a}
.x-meter i{display:block;height:100%;width:100%;background:var(--lamp);transform-origin:0 50%;transition:transform .5s,background .5s}

/* Manifesto, FAQ, CTA polish */
.manifesto-mark{display:inline-block;animation:x-spin 18s linear infinite}
@keyframes x-spin{to{transform:rotate(360deg)}}
.manifesto h2 em{color:var(--lamp)}
details summary span{transition:transform .3s}
details[open]{background:linear-gradient(90deg,#b83a2c0a,transparent)}
details[open] summary{color:var(--red)}
.final-cta h2>span{transition:transform .4s}
.final-cta:hover h2>span{transform:translate(12px,-12px)}
.button{position:relative;overflow:hidden;isolation:isolate}
.button:after{content:'';position:absolute;inset:0;background:#ffffff1f;transform:translateX(-101%);transition:transform .35s;z-index:-1}
.button:hover:after{transform:none}
.button span{transition:transform .3s}.button:hover span{transform:translate(3px,-3px)}

/* Studio liveliness: preview reacts when updated */
.preview-poster.x-ping{animation:x-ping .4s}
@keyframes x-ping{40%{transform:rotate(-.6deg) scale(1.01)}}
.studio-dialog[open]{animation:x-dlg .45s cubic-bezier(.2,.8,.2,1)}
.case-dialog[open],.privacy-dialog[open]{animation:x-dlg .4s cubic-bezier(.2,.8,.2,1)}
@keyframes x-dlg{from{opacity:0;transform:translateY(24px) scale(.98)}}
.charge-chip,.option-button,.style-card,.sample-choice{transition:transform .2s,background .2s,color .2s}
.charge-chip:hover,.option-button:hover,.style-card:hover,.sample-choice:hover{transform:translateY(-2px)}

@media(max-width:900px){.x-int-board{grid-template-columns:1fr}.x-int-suspects{flex-direction:row;overflow-x:auto}.x-suspect{flex:1;min-width:150px}.x-int-room{grid-template-columns:1fr;padding:18px}.x-int-portrait{grid-row:auto;max-width:280px}.x-int-head{grid-template-columns:1fr}}
@media(max-width:760px){.x-interrogation{padding-top:56px;padding-bottom:60px}.x-height{display:none}.ticker{margin:6px 0}.x-int-suspects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.x-suspect{min-width:0;flex-direction:column;align-items:flex-start;gap:8px;padding:8px}.x-suspect img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}.x-suspect small{font-size:7px;letter-spacing:0}.x-suspect:hover{transform:translateY(-2px)}}
.preview-poster .suspect-name{word-break:normal;overflow-wrap:normal}
@media(hover:none){.case-card .x-glare{display:none}}
@media(prefers-reduced-motion:reduce){.x-reveal{opacity:1;transform:none}.hero-frame{opacity:1}}

/* ===== v2: transformed first impression ===== */
.x-scanner{background:var(--red);color:#fbf3e6;justify-content:flex-start;gap:28px;height:34px;overflow:hidden}
.x-scanner>span:nth-child(3){margin-left:auto}
.x-scan-dot{width:8px;height:8px;border-radius:50%;background:#fbf3e6;flex:none;animation:x-blink 1.4s steps(1) infinite}
.x-header{background:var(--ink)!important;color:var(--paper);border-bottom:0;gap:24px}
.x-header .logo-star{color:var(--ochre)}
.x-nav{display:flex;gap:6px!important}
.x-nav a{font-size:13px;padding:9px 12px;border:1px solid transparent;transition:border-color .2s,background .2s}
.x-nav a:after{display:none}
.x-nav a:hover{border-color:#f3efe540;background:#f3efe50f}
.x-nav i{font:normal 9px var(--mono);color:var(--ochre);margin-right:7px;vertical-align:2px}
.x-header .button.red{color:#fbf3e6}

.x-hero{position:relative;padding-top:26px;padding-bottom:70px;overflow:hidden;background:
 linear-gradient(#23241f0d 1px,transparent 1px) 0 0/100% 64px,
 radial-gradient(ellipse at 62% 55%,#f1d9a466,transparent 55%),var(--paper)}
.x-meta{display:flex;flex-wrap:wrap;gap:8px 30px;font:10px var(--mono);letter-spacing:1.2px;color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:12px}
.x-meta span:first-child{color:var(--red)}
.x-meta s{text-decoration-color:var(--red);text-decoration-thickness:2px}
.x-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.46fr);grid-template-areas:"eb eb eb" "h h h" "lede stage rail" "cta stage rail" "facts stage rail" ". stage rail";column-gap:44px;align-items:start}
.x-hero-copy{display:contents}
.x-hero-copy>.eyebrow{grid-area:eb;margin-top:26px}
.x-h1{grid-area:h;margin:12px 0 0!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;font-size:clamp(76px,10.4vw,186px)!important;line-height:.86!important;letter-spacing:-.045em!important;position:relative;z-index:1}
.x-l1{display:inline-block;animation:x-rise2 .8s cubic-bezier(.2,.8,.2,1) backwards}
.x-l2{display:inline-block;color:var(--red);letter-spacing:-.04em!important;animation:x-rise2 .8s .12s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes x-rise2{from{transform:translateY(40px)}}
.x-lede{grid-area:lede;font-size:19px;line-height:1.45;max-width:420px;margin-top:34px;color:#3a3b33}
.x-lede b{color:var(--ink);font-weight:700}
.x-ctas{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.x-cta-main{padding:22px 28px!important;font-size:15px!important;box-shadow:6px 6px 0 var(--ink)}
.x-cta-main:hover{box-shadow:9px 9px 0 var(--ink)}
.x-cta-alt{font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:4px}
.x-cta-alt:hover{color:var(--red);border-color:var(--red)}
.x-facts{grid-area:facts;list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);max-width:460px}
.x-facts li{padding:14px 12px 0 0}
.x-facts b{display:block;font:700 38px/1 var(--display);color:var(--red)}
.x-facts span{display:block;font:9px/1.5 var(--mono);color:var(--muted);margin-top:6px;letter-spacing:.4px}
.x-hero-stage{grid-area:stage;position:relative;margin-top:-58px;padding:0 10px!important;z-index:2}
.x-tape{position:absolute;z-index:4;width:110px;height:30px;background:#e9dcb8cc;box-shadow:0 1px 2px #0002;pointer-events:none}
.x-tape-a{top:-12px;left:18%;transform:rotate(-8deg)}.x-tape-b{top:-6px;right:12%;transform:rotate(6deg)}
.x-hero-stage .poster-photo{position:relative}
.x-stamps{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;z-index:2}
.x-stamp{font-size:clamp(13px,1.3vw,20px)}
.x-stamp-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.x-stamp-btn{font:700 13px var(--sans);border:1px solid var(--ink);padding:10px 14px;display:inline-flex;gap:10px;align-items:center;transition:background .2s,color .2s,transform .2s}
.x-stamp-btn span{color:var(--red);font-size:18px;transition:transform .4s}
.x-stamp-btn:hover{background:var(--ink);color:var(--paper);transform:rotate(-1.5deg)}
.x-stamp-btn:hover span{transform:rotate(180deg)}
.x-hero-stage .red-label{display:none}
.x-rail{grid-area:rail;display:flex;flex-direction:column;gap:22px;padding-top:6px}
.x-polaroid{margin:0;background:#fbf7ee;padding:9px 9px 12px;box-shadow:3px 6px 14px #3d2f1f2b;transition:transform .35s}
.x-polaroid img{aspect-ratio:4/5;object-fit:contain;object-position:center;background:#f4efe2}
.x-polaroid figcaption{font:9px/1.5 var(--mono);margin-top:9px;color:#4d4b42}
.x-polaroid figcaption b{display:block;color:var(--red);letter-spacing:1px}
.x-p1{transform:rotate(3deg)}.x-p2{transform:rotate(-4deg);margin-left:12px}
.x-polaroid:hover{transform:rotate(0) scale(1.04)}
.x-notecard{background:#fff8e4;padding:14px 14px 16px;transform:rotate(1.5deg);box-shadow:2px 4px 10px #3d2f1f22;background-image:linear-gradient(transparent 23px,#b83a2c22 24px);background-size:100% 24px;font-size:13px;line-height:24px}
.x-notecard .micro{color:var(--red);display:block}
.x-notecard s{text-decoration-color:var(--red)}
.x-notecard em{color:var(--red)}
.x-verdicts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:var(--paper)}
.x-verdicts span{padding:20px max(2vw,16px);font-size:13px;line-height:1.4;border-right:1px solid #f3efe522}
.x-verdicts i{display:block;font:normal 9px var(--mono);color:var(--ochre);margin-bottom:6px;letter-spacing:1px}
.x-verdicts span:last-child{border:0;color:#d9cfb8}

@media(max-width:1180px){.x-nav i{display:none}.x-nav a{padding:8px}.x-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eb eb" "h h" "lede stage" "cta stage" "facts stage" "rail rail"}.x-rail{flex-direction:row;padding-top:40px;align-items:flex-start}.x-rail>*{flex:1}.x-p2{margin-left:0}}
@media(max-width:900px){.x-nav{display:none!important}.x-scanner>span:nth-child(3){display:none}}
@media(max-width:760px){.x-hero{padding-bottom:44px}.x-meta span:nth-child(n+3){display:none}.x-hero-grid{grid-template-columns:1fr;grid-template-areas:"eb" "h" "lede" "cta" "stage" "facts" "rail";column-gap:0}.x-h1{font-size:clamp(64px,19vw,110px)!important;flex-direction:column;gap:0}.x-lede{font-size:17px;margin-top:22px}.x-hero-stage{margin-top:44px}.x-cta-main{width:100%}.x-rail{flex-wrap:wrap;gap:16px}.x-rail>.x-polaroid{flex:1 1 40%}.x-notecard{flex-basis:100%}.x-verdicts{grid-template-columns:1fr 1fr}.x-verdicts span:nth-child(2){border-right:0}.x-verdicts span{border-bottom:1px solid #f3efe522}.x-scanner{font-size:8px;gap:12px}.x-stamp-bar{flex-wrap:wrap}}
@media(max-width:400px){.x-facts b{font-size:30px}.x-verdicts{grid-template-columns:1fr}}

/* The supplied examples are finished, lettered portraits, so show each complete print. */
.hero-poster .poster-photo img{object-fit:contain;background:#f4efe2}
.gallery-frame.sample-frame{display:block;padding:0;background:none;box-shadow:none}
.gallery-frame.sample-frame .sample-portrait{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:none}
.case-dialog .case-art-display .gallery-frame.sample-frame{width:min(100%,440px);margin:auto}
@media(prefers-reduced-motion:reduce){.x-l1,.x-l2{animation:none}}