/* Femme Fatale on the shared case-study system.
   The game's IM Fell English display face and warm brass palette are kept; layout, spacing,
   controls, captions, and navigation follow the portfolio design language. */
@font-face { font-family: 'IM Fell English'; src: url('fonts/im-fell-english.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

body.pf-system.pf-unified[data-portfolio='femmefatale'] {
  --ff-display: 'IM Fell English', Georgia, serif;
  --ff-gold: #d7b77e;
}

.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; }
.skip-link:focus { top: 12px; }

/* Display type: cover, chapter, module, and card titles. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-cover-hero h1 {
  font: 400 clamp(88px,11.5vw,184px)/.96 var(--ff-display) !important; letter-spacing: -.03em !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] main :is(.pf-title,[data-ds-type='section-title']) {
  font-family: var(--ff-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] main :is(.pf-subtitle,[data-ds-type='subsection-title'],.pf-subchapter-intro > h3) {
  font-family: var(--ff-display) !important; font-weight: 400 !important; font-size: clamp(24px,2vw,28px) !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] main [data-ds-type='card-title'] {
  font-family: var(--ff-display) !important; font-weight: 400 !important; margin: 0 0 12px !important; color: var(--pf-ink) !important;
}

/* Modules: 24px subsection heading, 12px to its description, 32px to the evidence, 64px between modules. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] :is(.ff-module,.ff-system) + .ff-module { margin-top: var(--pf-module) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-module-intro { max-width: 760px; margin: 0 0 32px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-module-intro > h3 { margin: 0 0 12px !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-module-intro > .pf-description { margin: 0 !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-chapter-intro .pf-description,
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-subchapter-intro .pf-description { max-width: 760px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-interaction-hint { margin: -16px 0 16px !important; }

/* Evidence frames: the artifact is framed; its caption sits outside. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] main figure { margin: 0; min-width: 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-frame {
  position: relative; overflow: clip; background: var(--pf-surface);
  border: 1px solid var(--pf-border); border-radius: var(--pf-radius);
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-frame > img { display: block; width: 100%; height: auto; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] main :is(figcaption.pf-caption,.ff-module > .pf-caption,.pf-subchapter > .pf-caption) { margin: 12px 0 0 !important; max-width: 760px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-evidence {
  display: inline; margin-right: 8px; color: var(--pf-ink) !important;
  font: 500 16px/1.6 var(--pf-font) !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }

/* Overview */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-story { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-story-main { grid-column: 1 / -1; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-status { margin: 40px 0 0 !important; padding-top: 24px; border-top: 0; max-width: none !important; }

/* Video and 3D */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-video { background: #080b08; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #080b08; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-art-stage { display: grid; place-items: center; aspect-ratio: 1; padding: 24px; background: #11120f; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-art-stage > img { width: 100%; height: 100%; object-fit: contain; }
/* 3D viewers follow Feral's character viewer: canvas stage, corner reset control, hidden loading status. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model { aspect-ratio: 1; background: radial-gradient(ellipse at 50% 45%,#454337 0,#282b24 50%,#171a15 100%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer { position: absolute; inset: 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-toolbar { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-stage { position: absolute; inset: 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-stage canvas:active { cursor: grabbing; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-stage canvas:focus-visible { outline: 3px solid var(--pf-control-focus); outline-offset: -3px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-reset { width:40px; height:40px; padding:0 !important; display:grid; place-items:center; border-radius:50% !important; border:1px solid rgba(224,213,185,.28) !important; background:rgba(16,18,15,.66) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--project-pale,#e0d5b9) !important; font-size:0 !important; line-height:1 !important; box-shadow:0 4px 18px rgba(0,0,0,.35) !important; transition:border-color .2s,background .2s,color .2s,transform .2s; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-reset svg { display:block; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-reset:hover { border-color:var(--project-bright,#d0ad72) !important; color:#fff !important; background:rgba(16,18,15,.85) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-reset:active { transform:scale(.94); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer:not([data-ready='true']) .model-reset { visibility: hidden; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer .model-status:not(.sr-only) {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  font: 400 12px/1.5 var(--pf-mono) !important; color: var(--pf-muted) !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* A poster keeps the artwork available before the visitor requests the 3D model. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-cover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-cover[hidden] { display: none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-cover img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; opacity: .5; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-load { position: relative; min-height: 44px; padding: 10px 16px; border: 1px solid var(--project-color); border-radius: var(--pf-control-radius); background: var(--project-color); color: var(--project-on-color); cursor: pointer; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-load:disabled { cursor: progress; }
/* Models load automatically; the button appears only after a failure or when the visitor saves data. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer:not([data-ready='error']):not([data-ready='manual']) .model-load { display: none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer[data-ready='loading'] .model-cover img { animation: ff-model-breathe 1.6s ease-in-out infinite; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer[data-ready='loading'] .model-status:not(.sr-only) { align-items: end; z-index: 4; pointer-events: none; }
@keyframes ff-model-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .3; } }
@media(prefers-reduced-motion:reduce) { body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer[data-ready='loading'] .model-cover img { animation: none; } }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .model-load:focus-visible { outline: 3px solid var(--pf-control-focus); outline-offset: 4px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] [data-ready='error'] .model-status { align-items: end !important; z-index: 4; pointer-events: none; }

/* Design system */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-system { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-system-block { padding: 24px !important; background: var(--pf-surface) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-states { grid-column: 1 / -1; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches > div { display: grid; gap: 4px; min-width: 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches i { display: block; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; margin-bottom: 8px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches b { font: 500 14px/1.4 var(--pf-font) !important; color: var(--pf-ink); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches code { font: 400 12px/1.5 var(--pf-mono); color: var(--pf-muted); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type-specimen { font: 400 88px/1 var(--ff-display); color: var(--ff-gold); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type strong { display: block; font: 400 28px/1.2 var(--ff-display) !important; color: var(--pf-ink); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type span:not(.ff-type-specimen) { font: 400 14px/1.6 var(--pf-font); color: var(--pf-muted); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type-sample { margin: 24px 0 0; padding-top: 16px; border-top: 0; font: 400 24px/1.3 var(--ff-display); color: #e6d4b0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-state-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-state-grid figure { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; background: #11120f; border: 1px solid var(--pf-border); border-radius: 4px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-state-grid img { width: 100%; height: auto; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] :is(.ff-state-grid,.ff-button-states) figcaption { grid-column: 1 / -1; font: 400 12px/1.5 var(--pf-mono); color: var(--pf-muted); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-button-states { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-button-states figure { display: grid; gap: 8px; padding: 16px; background: #11120f; border: 1px solid var(--pf-border); border-radius: 4px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-button-states img { width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-states > .pf-caption { margin: 24px 0 0 !important; }

/* Gameplay */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-card { padding: 24px !important; background: var(--pf-surface) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pf-muted); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-level-study > h4 { margin: 0 0 16px !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-marker {
  position: absolute; display: grid; place-items: center; width: 32px; height: 32px; translate: -50% -50%;
  border: 2px solid #11120f; border-radius: 50%; background: var(--ff-gold); color: #11120f;
  font: 500 14px/1 var(--pf-mono) !important; box-shadow: 0 0 0 1px var(--ff-gold); color: #11120f !important;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: ff-note; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--pf-muted); counter-increment: ff-note; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes li::before { content: counter(ff-note); font: 400 12px/1.9 var(--pf-mono); color: var(--project-bright); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes strong { color: var(--pf-ink); }

/* Environments */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout { align-items: start; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-map { display: grid; place-items: center; aspect-ratio: 1; padding: 40px; background: #0f1a14; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-map > img { width: min(100%,420px); }

/* Characters */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-turnaround { background: #e9e2d2; }
/* The pair spans the content width like other image pairs; wide stages keep the figures at a readable height. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-sprite { aspect-ratio: 5 / 4; background: #11120f; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-sprite > img { position: absolute; top: 5%; left: 50%; width: auto; max-width: none; height: 90%; transform: translateX(-50%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-beats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 24px 0 0; padding: 24px 0 0; list-style: none; border-top: 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-beats li { display: grid; gap: 4px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-beats strong { font: 400 12px/1.5 var(--pf-mono) !important; color: var(--project-bright); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-beats span { font-size: 14px; line-height: 1.6; color: var(--pf-muted); }

/* Embedded studies: keep their drawings and colors; align frames, labels, and controls with the system. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-study { background: transparent; overflow: visible; color: var(--pf-ink); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-study :is(.ps-label,.ps-corner-note,.ps-reveal-tag,.ps-caption-line,.ps-hierarchy-label) {
  font-family: var(--pf-mono) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none;
}
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-study :is(p,span:not(.ps-menu-state),small,output,figcaption) { font-family: var(--pf-font); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-study :is(.ps-exploded,.ps-reveal-stage,.ps-jab-study,.ps-pickup-live,.ps-hierarchy-screen,.ps-hud-screen) {
  border-color: var(--pf-border) !important; border-radius: var(--pf-radius); overflow: clip;
}
/* The chapter description already explains the hierarchy study. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] [data-ff-island='UxHierarchyStudy'] .ps-visual-caption { display: none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout .ff-study { padding: 24px; background: #101715; border: 1px solid var(--pf-border); border-radius: var(--pf-radius); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout .ps-city-map { height: auto; aspect-ratio: 900 / 920; max-height: 420px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout .ps-district { min-height: 44px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout .ps-district > span:first-child { font: 400 12px/1.5 var(--pf-mono) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-layout .ps-district strong { font: 400 20px/1.3 var(--ff-display) !important; margin: 0; }

@media (max-width: 900px) {
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-cards { grid-template-columns: 1fr; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-system { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.pf-system.pf-unified[data-portfolio='femmefatale'] :is(.ff-pair,.ff-story) { grid-template-columns: 1fr; gap: 32px; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-sprites { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-sprite { aspect-ratio: 2 / 3; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-swatches { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-state-grid { grid-template-columns: 1fr; gap: 12px; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-button-states { grid-template-columns: 1fr; gap: 12px; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-beats { grid-template-columns: 1fr; gap: 16px; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type-specimen { font-size: 64px; }
}

/* 3D models: a quiet drag hint until the reader turns the model. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-model-viewer[data-ready='true']:not([data-hinted]) .model-stage::after { content:'Drag to rotate'; position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:7px 12px; border:1px solid rgba(224,213,185,.22); border-radius:999px; background:rgba(16,18,15,.78); color:var(--project-pale,#e0d5b9); font:11px/1 var(--pf-mono,Consolas,monospace); letter-spacing:.06em; pointer-events:none; animation:ff-model-hint-in .6s .4s both; }
@keyframes ff-model-hint-in { from { opacity:0; transform:translate(-50%,6px); } to { opacity:1; transform:translate(-50%,0); } }

/* HUD hierarchy: the wireframe stays neutral (no highlighted corner) and the artwork frame matches the
   real HUD's proportions: small objective card, compass minimap, portrait health bar, and a vertical
   weapon column with the ammunition counter beside the pistol. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hierarchy-screen g rect { fill:none !important; stroke:#62765a !important; stroke-width:1 !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-screen { aspect-ratio:16/9 !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-screen::after { content:none !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-world { opacity:1 !important; filter:none !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-safe-area,
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-center { display:none !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-objective { left:1.2% !important; top:3.4% !important; width:18% !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-map { right:1.6% !important; top:3% !important; width:12.4% !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-health { left:1.4% !important; bottom:5% !important; width:17.5% !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-weapons { right:1.8% !important; bottom:2.4% !important; width:4.3% !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; row-gap:6% !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-weapons figure { width:100% !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-weapons::after { content:''; position:absolute; right:112%; bottom:1%; width:200%; aspect-ratio:672/354; background:url(process/ui-pickup-ammo.png) center/contain no-repeat; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-hud-weapons img { filter:brightness(.62416); }

/* HUD hierarchy: a wireframe of the first-person HUD beside the finished capture, revealed by one divider. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px !important; background:#101614 !important; touch-action:pan-y; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .comparison-viewport { position:absolute; inset:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .ff-wire, body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .comparison-final { position:absolute; inset:0; width:100%; height:100%; display:block; margin:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .comparison-final { object-fit:cover; clip-path:inset(0 calc(100% - var(--reveal)) 0 0); pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .compare-divider { position:absolute; top:0; bottom:0; left:var(--reveal); width:2px; z-index:3; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .compare-divider > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; font-size:18px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .compare-label { position:absolute; top:12px; white-space:nowrap; z-index:2; padding:8px 12px; border-radius:4px; background:rgba(16,18,15,.85); color:var(--project-pale); font:13px/1 var(--pf-mono,Consolas,monospace) !important; letter-spacing:.1em; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .compare-label.left { right:calc(100% - var(--reveal) + 12px); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare .compare-label.right { left:calc(var(--reveal) + 12px); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; z-index:4; appearance:none; -webkit-appearance:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-compare:focus-within .compare-divider > span { outline:3px solid var(--project-bright); outline-offset:4px; }

/* Weapon pickup: 0.65 s column lift, with the pistol and counter fading in over the first 0.30 s. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup { display:grid; grid-template-columns:1.1fr 1fr; align-items:start; gap:var(--pf-grid-gap); padding:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage { position:relative; aspect-ratio:440/340; overflow:hidden; border-radius:8px; background:#101614; border:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage::after { content:''; position:absolute; left:10%; right:10%; bottom:7.94%; height:1px; background:rgba(224,213,185,.22); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-tag { display:block; color:var(--project-bright); font:12px/1.6 var(--pf-mono,Consolas,monospace) !important; letter-spacing:.14em; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage .ff-pickup-tag { position:absolute; left:22px; top:18px; z-index:2; font-size:11px !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud { position:absolute; inset:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud img { position:absolute; right:11.36%; width:19.09%; height:auto; margin:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='punch'] { bottom:calc(7.94% + 28.24% + 28.24% * var(--lift)); filter:brightness(var(--dim)); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='knife'] { bottom:calc(7.94% + 28.24% * var(--lift)); filter:brightness(.62416); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='pistol'] { bottom:calc(7.94% - 28.24% * (1 - var(--lift))); opacity:var(--reveal); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='ammo'] { width:37.95%; right:calc(11.36% + 19.09% + 2.73%); bottom:calc(7.94% - 28.24% * (1 - var(--lift))); opacity:var(--reveal); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock { position:absolute; left:22px; bottom:20px; display:flex; flex-direction:column; gap:6px; font-variant-numeric:tabular-nums; z-index:2; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock strong { font:clamp(34px,4vw,56px)/1 'IM Fell English',Georgia,serif; color:#e5c68d; font-weight:400; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock strong small { font-size:.45em; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock span { font:13px/1.4 var(--pf-mono,Consolas,monospace); color:#aebfa3; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-controls { display:flex; align-items:center; gap:14px; padding-top:16px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-auto { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid rgba(224,162,74,.45); border-radius:5px; background:rgba(224,162,74,.08); color:var(--project-pale); font:13px/1 var(--pf-font); letter-spacing:.02em; cursor:pointer; transition:opacity .2s,background .2s,border-color .2s; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-auto:hover { background:rgba(224,162,74,.16); border-color:var(--project-bright); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-auto[disabled] { opacity:.38; cursor:default; background:transparent; border-color:rgba(224,162,74,.25); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range'] { appearance:none !important; -webkit-appearance:none !important; flex:1; min-width:0; height:30px; min-height:30px; margin:0; padding:0; background:transparent !important; cursor:pointer; --track:#0d1310; --tick:rgba(224,213,185,.18); --fill:rgba(224,162,74,.28); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range']::-webkit-slider-runnable-track { height:30px; border-radius:4px; border:1px solid rgba(224,213,185,.16); background:linear-gradient(90deg,var(--fill) 0,var(--fill) calc(var(--progress,0) * 100%),transparent calc(var(--progress,0) * 100%)),repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px calc(100% / var(--ticks,9))),var(--track); background-origin:border-box; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range']::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:3px; height:30px; margin-top:-1px; border:0; border-radius:1px; background:var(--project-bright); box-shadow:0 0 0 1px rgba(2,3,5,.9),0 0 10px rgba(224,162,74,.8); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range']::-moz-range-track { height:30px; border-radius:4px; border:1px solid rgba(224,213,185,.16); background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px calc(100% / var(--ticks,9))),var(--track); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range']::-moz-range-progress { height:30px; background:var(--fill); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline input[type='range']::-moz-range-thumb { width:3px; height:30px; border:0; border-radius:1px; background:var(--project-bright); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline output { flex:none; min-width:58px; text-align:right; font:12px/1 var(--pf-mono,Consolas,monospace); letter-spacing:.04em; color:var(--project-bright); font-variant-numeric:tabular-nums; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-explainer { min-width:0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-explainer p { margin:12px 0 0; font:15px/1.6 var(--pf-font); color:var(--pf-muted); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-curves { display:block; width:100%; height:auto; margin-top:20px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-legend { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:8px; font:13px/1.4 var(--pf-font); color:#bbc7b0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-legend span { display:flex; align-items:center; gap:8px; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-legend i { width:16px; height:3px; background:#d7b77e; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-legend span:nth-child(2) i { background:#98c3ad; }
@media(max-width:760px) {
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup { grid-template-columns:1fr; padding:0; gap:var(--pf-grid-gap); }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-controls { flex-wrap:wrap; }
  body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-timeline { flex-basis:100%; }
}
/* Typography card: the specimen fills the card instead of leaving a gap beneath it. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-system-block:has(.ff-type) { display:flex; flex-direction:column; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type { margin:auto 0 !important; padding:8px 0; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type-specimen { font-size:96px !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type strong { font-size:32px !important; }
@media(max-width:760px) { body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-type-specimen { font-size:64px !important; } }

/* Level decisions: each numbered note holds to a single line on desktop. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes li { font-size:14px !important; line-height:1.6 !important; }
@media(min-width:1000px) { body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-notes li > span { white-space:nowrap; } }

body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-corner-note { display:none !important; }

/* Enemy jab: the seven drawings are registered on a shared ground line so the figure does not bob between frames. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(1), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(1) img { transform:translateY(-0.39%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(2), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(2) img { transform:translateY(0.07%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(3), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(3) img { transform:translateY(0.07%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(4), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(4) img { transform:translateY(1.95%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(5), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(5) img { transform:translateY(0.13%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img:nth-child(6), body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-filmstrip figure:nth-child(6) img { transform:translateY(1.43%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-study > .ps-caption-line { display:none !important; }

/* Weapon pickup: the reconstruction sits over a dimmed crop of the real street so it reads as the HUD's corner. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% 100%; transform:scale(2.6); transform-origin:100% 100%; filter:blur(3px) brightness(.32) saturate(.85); opacity:1; margin:0; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 72% 70%,transparent 30%,rgba(8,12,10,.55) 75%,rgba(8,12,10,.8)); pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage::after { display:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud { z-index:2; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud img { filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='punch'] { filter:brightness(var(--dim)) drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-hud [data-slot='knife'] { filter:brightness(.62416) drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-prompt { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border:1px solid rgba(224,213,185,.35); border-radius:6px; background:rgba(16,18,15,.78); color:var(--project-pale); font:13px/1 var(--pf-mono,Consolas,monospace); letter-spacing:.12em; text-transform:uppercase; opacity:var(--prompt,1); transition:opacity .35s ease; pointer-events:none; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-prompt kbd { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(224,213,185,.5); border-radius:4px; background:rgba(224,213,185,.1); font:600 12px/1 var(--pf-mono,Consolas,monospace); color:#fff; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-stage .ff-pickup-tag, body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock { z-index:3; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ff-pickup-clock strong { text-shadow:0 2px 12px rgba(0,0,0,.6); }

/* Enemy jab: the seven source drawings differ slightly in scale and baseline, so each is scaled by its stance width and
   pinned to one floor line and one centre. The frame box matches the drawing's 2:3 ratio so percentages map to the image. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-frame { width:auto; aspect-ratio:2 / 3; height:100%; left:50%; transform:translateX(-50%); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-frame img { object-fit:fill; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-1.png'] { transform-origin:51.86% 96.29%; transform:translate(-0.10%,-0.52%) scale(0.9371); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-2.png'] { transform-origin:51.66% 95.83%; transform:translate(0.10%,-0.07%) scale(1.0075); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-3.png'] { transform-origin:51.76% 95.77%; transform:translate(0.00%,0.00%) scale(1.0000); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-4.png'] { transform-origin:51.66% 93.88%; transform:translate(0.10%,1.89%) scale(0.9963); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-5.png'] { transform-origin:51.71% 95.77%; transform:translate(0.05%,0.00%) scale(0.9981); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-6.png'] { transform-origin:51.86% 94.47%; transform:translate(-0.10%,1.30%) scale(0.9781); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .ps-jab-frame img[src$='jab-7.png'] { transform-origin:51.66% 95.83%; transform:translate(0.10%,-0.07%) scale(1.0075); }
/* The jab study keeps the page's warm ink instead of the exporter's green. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-study { border-color:#383a2e; background:#1a1b16; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-stage { background:radial-gradient(ellipse at 50% 70%,#4c3f2466,transparent 65%),repeating-linear-gradient(0deg,transparent,transparent 63px,#a08a5c10 64px); }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-filmstrip,
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-study > .ps-caption-line { border-color:#383a2e; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-filmstrip figure { border-right-color:#383a2e; color:#b7b7ab; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-filmstrip small,
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-study .ps-caption-line { color:#b7b7ab; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-study .ps-caption-line > span:last-child,
body.pf-system.pf-unified[data-portfolio='femmefatale'] .process-studio .ps-jab-readout small { color:#8f8f84; }