/* Product colors are literal and section-scoped: portfolio palettes stay outside. */
.jf-products{--jfp-heading:'Bricolage Grotesque',sans-serif;--jfp-serif:'Instrument Serif',serif;--jfp-body:'Bricolage Grotesque',sans-serif;--jfp-accent:#f2eee4;position:relative;isolation:isolate;margin:100px auto;padding:0 0 20px;color:#f2eee4;font-family:var(--jfp-body);text-align:left;max-width:1320px}
.jf-products *{box-sizing:border-box}
.jf-products [hidden]{display:none!important}
.jf-products :is(h2,p){padding:0;margin:0;text-transform:none;letter-spacing:normal}
.jf-products :is(a,button,summary){-webkit-tap-highlight-color:transparent}
.jf-products :is(a,button,summary):focus-visible{outline:3px solid #fff7d8;outline-offset:5px}
.jf-products .jfp-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:0 0 40px}
.jf-products .jfp-eyebrow,.jf-products .jfp-meta,.jf-products .jfp-jump,.jf-products .jfp-sample-note{font:400 11px/1.6 'JetBrains Mono',monospace;letter-spacing:.04em}
.jf-products .jfp-eyebrow{color:var(--jfp-accent);margin-bottom:16px}
.jf-products .jfp-heading{font:600 clamp(36px,5vw,66px)/1.03 var(--jfp-heading);color:inherit}
.jf-products :is(.jfp-heading,.jfp-statement) em{font-family:var(--jfp-serif);font-weight:400}
.jf-products .jfp-jump{display:flex;gap:6px;flex-wrap:wrap}
.jf-products .jfp-jump a{display:flex;align-items:center;min-height:44px;padding:10px 14px;color:inherit;-webkit-text-fill-color:currentColor;text-decoration:none;border:1px solid #ffffff30;border-radius:30px}
.jf-products .jfp-jump a:hover{background:#ffffff12}
.jf-products .jfp-product{--jfp-brand:#efc67f;position:relative;display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;margin:0 0 24px;border:1px solid #ffffff23;border-radius:28px;scroll-margin-top:110px;color:#f5f0e4;background:#141b17}
.jf-products .jfp-copy{position:relative;z-index:2;padding:clamp(26px,4.2vw,62px);min-width:0}
.jf-products .jfp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:35px;color:#d5dccf}
.jf-products .jfp-status{border:1px solid #ffffff38;border-radius:20px;padding:3px 9px;white-space:nowrap;font-size:10px;color:#f5f0e4}
.jf-products .jfp-name{font:600 clamp(28px,3vw,42px)/1.1 var(--jfp-heading);color:#fff3dc;overflow-wrap:anywhere}
.jf-products .jfp-name--pixel{min-height:78px;margin-bottom:14px}
.jf-products .jfp-name--pixel img{display:block;width:210px;max-width:100%;height:78px;object-fit:contain;object-position:left;image-rendering:pixelated;filter:none}
.jf-products .jfp-lockup{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.jf-products .jfp-lockup img{width:58px;height:58px;flex-shrink:0;filter:none;border-radius:13px}
.jf-products .jfp-statement{font:500 clamp(30px,3.6vw,48px)/1.09 var(--jfp-heading);margin-bottom:23px;color:#fff3dc;max-width:520px}
.jf-products .jfp-description{font:400 16px/1.75 var(--jfp-body);color:#e2e5d8;max-width:440px}
.jf-products .jfp-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}
.jf-products .jfp-button,.jf-products .jfp-link{font:600 14px/1.4 var(--jfp-body);text-decoration:none;-webkit-text-fill-color:currentColor;min-height:48px;display:inline-flex;gap:18px;align-items:center}
.jf-products .jfp-button{background:#e6dcbf;color:#18231a;border-radius:30px;padding:13px 22px;border:1px solid #e6dcbf}
.jf-products .jfp-button:hover{background:#fff2cf}
.jf-products .jfp-link{color:#f5e9c9;text-decoration:underline;text-underline-offset:5px}
.jf-products .jfp-art{position:relative;min-height:460px;overflow:hidden;isolation:isolate}
.jf-products .jfp-grove{background:#10151f}
.jf-products .jfp-grove>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center center;image-rendering:pixelated;filter:none}
.jf-products .jfp-grove::before{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 44% 18%,#a25cff55 0,#7b55ee33 25%,transparent 58%);mix-blend-mode:screen}
.jf-products .jfp-grove::after{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,#0c171de8,transparent 47%)}
.jf-products .jfp-grove-label{position:absolute;z-index:2;bottom:38px;left:35px;right:25px;color:#f4e8bf;font:16px/1.4 'JetBrains Mono',monospace}
.jf-products .jfp-writers{background:#211810;--jfp-brand:#f3c77c}
.jf-products .jfp-writers .jfp-meta{color:#e1c89d}
.jf-products .jfp-release{font:400 13px/1.65 var(--jfp-body);color:#dfcfaf;margin-top:18px;max-width:400px}
.jf-products .jfp-preview{margin-top:26px;color:#f9e5b7;max-width:440px}
.jf-products .jfp-preview>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #d9b16c99;border-radius:28px;padding:13px 20px;font:600 14px/1.5 var(--jfp-body);background:#ffffff05}
.jf-products .jfp-preview>summary::-webkit-details-marker{display:none}
.jf-products .jfp-preview>summary:hover{background:#f3c77c18}
.jf-products .jfp-preview[open]>summary span{transform:rotate(45deg)}
.jf-products .jfp-formats{display:none;gap:5px;margin:20px 0 12px}
.jf-products[data-jfp-enhanced] .jfp-formats{display:flex}
.jf-products .jfp-formats button{font:600 13px/1.4 var(--jfp-body);color:#f9e5b7;min-height:44px;padding:10px 15px;border:1px solid #d9b16c70;border-radius:6px;background:transparent;cursor:pointer}
.jf-products .jfp-formats button[aria-selected=true]{background:#f3d7a2;color:#241b12}
.jf-products .jfp-specimen{background:#f4e8ce;color:#34291d;padding:23px 20px;margin-top:16px;box-shadow:0 6px 20px #0003;border-radius:2px;font:13px/1.7 'Courier New',monospace}
.jf-products .jfp-specimen p{color:#34291d;font:inherit;margin-bottom:12px}
.jf-products .jfp-specimen .jfp-specimen-label{font:10px/1.5 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #34291d40;padding-bottom:10px;margin-bottom:20px}
.jf-products .jfp-specimen .jfp-character{text-align:center;margin-top:22px;margin-bottom:0}
.jf-products .jfp-specimen .jfp-dialogue{max-width:180px;margin:0 auto 20px}
.jf-products .jfp-specimen--poetry{padding:30px;font:italic 23px/1.55 var(--jfp-serif);min-height:260px}
.jf-products .jfp-sample-note{color:#d6c3a1;margin-top:12px;font-size:10px}
.jf-products .jfp-paper-field{background:radial-gradient(ellipse at 57% 29%,#bb854059,transparent 52%),linear-gradient(145deg,#3a291c,#17100d 60%,#0d0a09);perspective:900px}
.jf-products .jfp-paper-field::before{content:'';position:absolute;inset:24px;border:1px solid #edc68529;pointer-events:none}
.jf-products .jfp-paper-halo{position:absolute;width:62%;height:50%;left:23%;top:14%;border:1px solid #c79b5559;border-radius:50%;transform:rotate(-27deg);box-shadow:0 0 85px #dc963039,0 0 0 34px #d1a55b08}
.jf-products .jfp-paper{position:absolute;display:block;overflow:hidden;color:#332a1f;background:linear-gradient(135deg,#fff9eb,#efe2c6 75%,#d7bd91);border:1px solid #fff7e7;box-shadow:3px 6px 0 #a47642,12px 24px 36px #0009,0 0 38px #f4cc6c35;transform:rotate(var(--jfp-angle)) rotateY(var(--jfp-y));animation:jfp-paper 9s ease-in-out infinite alternate;animation-delay:var(--jfp-delay);animation-play-state:paused}
.jf-products .jfp-paper>span{display:block;position:relative;z-index:1}
.jf-products .jfp-paper::after{content:'';position:absolute;right:0;top:0;width:20%;height:16%;background:linear-gradient(135deg,#d6bb8a,#fff9ec 50%,#c6a878);clip-path:polygon(0 0,100% 100%,100% 0);box-shadow:-2px 2px 6px #57452a4d}
.jf-products .jfp-paper--script{left:17%;top:9%;width:clamp(160px,43%,245px);aspect-ratio:.73;padding:clamp(20px,4vw,34px) clamp(14px,3vw,25px);--jfp-angle:-9deg;--jfp-y:-7deg;--jfp-y-end:7deg;--jfp-delay:-3s;z-index:2}
.jf-products .jfp-paper--poem{left:60%;top:22%;width:clamp(140px,33%,195px);aspect-ratio:.77;padding:clamp(18px,3vw,29px) clamp(15px,2.5vw,24px);--jfp-angle:16deg;--jfp-y:12deg;--jfp-y-end:-12deg;--jfp-delay:-6s;background:linear-gradient(90deg,transparent 18%,#b66f5266 18.5%,transparent 19%),repeating-linear-gradient(180deg,transparent 0 24px,#7e9bad45 25px 26px),#f8edd7}
.jf-products .jfp-page-index{font:600 8px/1.5 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#856f51;border-bottom:1px solid #a083604d;padding-bottom:9px}
.jf-products .jfp-scene-title{margin-top:25%;font:700 clamp(10px,1.1vw,13px)/1.55 'Courier New',monospace;letter-spacing:.02em}
.jf-products .jfp-scene-lines{height:35px;margin-top:13px;background:linear-gradient(#745f4c55,#745f4c55) 0 1px/100% 1px no-repeat,linear-gradient(#745f4c55,#745f4c55) 0 11px/82% 1px no-repeat,linear-gradient(#745f4c55,#745f4c55) 0 21px/92% 1px no-repeat}
.jf-products .jfp-scene-character{text-align:center;font:700 10px 'Courier New',monospace;letter-spacing:.1em}
.jf-products .jfp-scene-dialogue{text-align:center;font:11px/1.6 'Courier New',monospace;margin-top:5px}
.jf-products .jfp-page-foot{position:absolute!important;bottom:20px;left:25px;color:#896744;font:7px/1.2 'JetBrains Mono',monospace;letter-spacing:.06em}
.jf-products .jfp-poem-lines{margin-top:33%;font:italic clamp(16px,1.7vw,21px)/1.3 var(--jfp-serif);color:#5a432e}
.jf-products .jfp-poem-lines i{font-weight:600;color:#8b5627}
.jf-products .jfp-page-rule{margin-top:18px;width:40%;border-top:1px solid #ac7c44}
.jf-products .jfp-paper-fleck{position:absolute;z-index:3;width:19px;height:24px;background:#e6c68e;box-shadow:2px 8px 18px #0007;clip-path:polygon(0 0,100% 7%,85% 100%,5% 90%);animation:jfp-fleck 7s ease-in-out infinite alternate;animation-play-state:paused}
.jf-products .jfp-paper-fleck--1{left:77%;top:12%;transform:rotate(35deg);animation-delay:-2s}
.jf-products .jfp-paper-fleck--2{left:7%;top:58%;transform:rotate(-25deg);animation-delay:-5s;width:12px;height:15px}
.jf-products .jfp-paper-caption{position:absolute;z-index:4;bottom:26px;left:35px;right:20px;display:flex;justify-content:space-between;align-items:end;gap:14px;color:#eed3a5;text-shadow:0 2px 10px #110b08;font:10px/1.5 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase}
.jf-products .jfp-paper-caption em{font:italic 30px/1 var(--jfp-serif);letter-spacing:0;text-transform:none;white-space:nowrap}
.jf-products .jfp-next{background:#102c22}
.jf-products .jfp-next .jfp-release{color:#cfdbcb}
.jf-products .jfp-next .jfp-meta{color:#c5daca}
.jf-products .jfp-threshold>p{font:400 14px/1.8 var(--jfp-body);color:#e2e5d8;margin-top:18px}
.jf-products .jfp-room{background:radial-gradient(ellipse at 58% 40%,#386446 0%,#132f24 55%,#0d231b 100%);min-height:500px}
.jf-products .jfp-room-wall{position:absolute;inset:0 0 25%;border-bottom:1px solid #7a947239;background:linear-gradient(90deg,transparent 50%,#0002 50%)}
.jf-products .jfp-doorframe{position:absolute;left:43%;top:17%;width:32%;height:58%;background:#efd48b;border:7px solid #46765a;box-shadow:0 0 60px #e4b85d38,0 0 7px #f7e2a8;perspective:800px}
.jf-products .jfp-door{position:absolute;inset:0 26% 0 0;transform-origin:left;transform:perspective(600px) rotateY(-29deg);background:linear-gradient(100deg,#f4f3ec,#c1c9b3);box-shadow:8px 0 15px #58432666;transition:transform 1.2s ease}
.jf-products .jfp-door>i{position:absolute;right:10px;top:55%;height:9px;width:7px;border-radius:50%;background:#1d4c3a}
.jf-products .jfp-light{position:absolute;left:35%;top:72%;width:70%;height:35%;background:linear-gradient(180deg,#f3d1829c,#d5ad4b00);clip-path:polygon(30% 0,52% 0,100% 100%,0 100%);filter:blur(2px);opacity:.8;transition:opacity 1.2s ease}
.jf-products .jfp-room-caption{position:absolute;left:35px;bottom:28px;right:20px;color:#d9dfc2;font:12px/1.5 'JetBrains Mono',monospace}
.jf-products .jfp-next:has(.jfp-threshold[open]) .jfp-door{transform:perspective(600px) rotateY(-62deg)}
.jf-products .jfp-next:has(.jfp-threshold[open]) .jfp-light{opacity:1}
.jf-products [data-jfp-visible=true] :is(.jfp-paper,.jfp-paper-fleck){animation-play-state:running}
.jf-products[data-jfp-still] :is(.jfp-paper,.jfp-paper-fleck){animation-play-state:paused!important}
.jf-products[data-jfp-paper-paused] :is(.jfp-paper,.jfp-paper-fleck){animation-play-state:paused!important}
/* Small local motion control: the papers keep their product palette in both skins. */
.jf-products:is(.jf-products--v1,.jf-products--v2) .jfp-motion-toggle{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:10px 14px;border:1px solid #d9b16c70;border-radius:2px;background:#ffffff05;color:#f9e5b7;font:500 13px/1.5 var(--jfp-body);cursor:pointer}
.jf-products:is(.jf-products--v1,.jf-products--v2) .jfp-motion-toggle:hover{background:#f3c77c18}
.jf-products--v2 .jfp-motion-toggle{border-radius:5px}
.jf-products[data-jfp-still] :is(.jfp-door,.jfp-light){transition:none}
@keyframes jfp-paper{0%{transform:translateY(-9px) rotate(var(--jfp-angle)) rotateY(var(--jfp-y))}100%{transform:translateY(10px) rotate(calc(var(--jfp-angle) + 4deg)) rotateY(var(--jfp-y-end))}}
@keyframes jfp-fleck{0%{translate:0 -6px;rotate:-9deg}100%{translate:8px 12px;rotate:13deg}}
/* V0: broad, rounded product windows inside the existing Breakdance shell. */
.jfv0-live--web .jf-products--v0{margin:70px 0 90px}
.jfv0-live--web .jf-products--v0 .jfp-heading{color:#f2eee4}
.breakdance .jf-products a{color:inherit;-webkit-text-fill-color:currentColor;text-decoration:none}
.breakdance .jf-products .jfp-button{color:#18231a}
.breakdance .jf-products .jfp-link{text-decoration:underline}
/* V1: editorial spreads, generous rules, cyan navigation, alternating artwork. */
.jf-products--v1{--jfp-heading:'DM Serif Display',serif;--jfp-serif:'DM Serif Display',serif;--jfp-body:'DM Sans',sans-serif;--jfp-accent:#04cffd;max-width:1200px;padding:0 28px}
.jf-products--v1 .jfp-heading{font-weight:400;font-size:clamp(42px,6vw,78px)}
.jf-products--v1 .jfp-jump a{border-radius:0;border-width:0 0 1px;color:#b9edfa;padding-inline:8px}
.jf-products--v1 .jfp-product{border-radius:0;border-width:1px 0;margin-bottom:55px;grid-template-columns:1fr 1fr}
.jf-products--v1 .jfp-writers .jfp-art{order:-1}
.jf-products--v1 .jfp-name{font-weight:400}
.jf-products--v1 .jfp-copy{padding:42px 35px}
.jf-products--v1 .jfp-button,.jf-products--v1 .jfp-preview>summary{border-radius:2px}
/* V2: signal labels, sharp frames, larger art fields, purple kept in the frame. */
.jf-products--v2{--jfp-accent:#b69dff;width:calc(100% - 88px)}
.jf-products--v2 .jfp-intro{border-top:1px solid #b69dff45;padding-top:32px}
.jf-products--v2 .jfp-product{border-radius:10px;grid-template-columns:1fr 1.1fr;margin-bottom:30px}
.jf-products--v2 .jfp-jump a,.jf-products--v2 .jfp-button,.jf-products--v2 .jfp-preview>summary{border-radius:5px}
.jf-products--v2 .jfp-meta{font-size:10px;letter-spacing:.06em}
@media(max-width:900px){.jf-products .jfp-intro{align-items:flex-start;flex-direction:column}.jf-products .jfp-copy{padding:30px}.jf-products .jfp-meta{margin-bottom:24px}.jf-products .jfp-art{min-height:440px}.jf-products--v2{width:calc(100% - 40px)}}
@media(max-width:680px){.jf-products{margin:60px auto}.jf-products .jfp-product{grid-template-columns:minmax(0,1fr);border-radius:16px}.jf-products .jfp-copy{padding:28px 24px}.jf-products .jfp-art{min-height:310px}.jf-products .jfp-writers .jfp-art{order:initial}.jf-products .jfp-name{font-size:30px}.jf-products .jfp-statement{font-size:36px}.jf-products .jfp-description{font-size:15px}.jf-products .jfp-meta{font-size:10px;gap:8px}.jf-products .jfp-actions{gap:12px 20px}.jf-products .jfp-heading{font-size:44px}.jf-products .jfp-jump{gap:6px}.jf-products .jfp-jump a{font-size:10px;padding:9px 11px}.jf-products .jfp-lockup{gap:12px}.jf-products .jfp-lockup img{width:48px;height:48px}.jf-products .jfp-paper--script{left:11%;top:5%;width:145px;padding:17px 14px}.jf-products .jfp-paper--poem{left:54%;top:13%;width:132px;padding:16px 12px}.jf-products .jfp-page-index{font-size:7px}.jf-products .jfp-scene-title{margin-top:17%;font-size:9px}.jf-products .jfp-scene-lines{margin-top:9px;height:28px}.jf-products .jfp-scene-character,.jf-products .jfp-scene-dialogue{font-size:8px}.jf-products .jfp-poem-lines{font-size:15px;margin-top:30%}.jf-products .jfp-page-foot{left:14px;bottom:12px;font-size:6px}.jf-products .jfp-paper-caption{left:24px;bottom:20px;font-size:8px}.jf-products .jfp-paper-caption em{font-size:23px}.jf-products .jfp-doorframe{width:28%;left:45%;height:62%;top:10%}.jf-products .jfp-light{top:70%}.jf-products .jfp-room-caption{font-size:10px;left:24px}.jf-products--v1{padding:0 20px}.jf-products--v1 .jfp-product{border-radius:0;margin-bottom:35px}.jf-products--v2{width:calc(100% - 32px)}.jfv0-live--web .jf-products--v0{margin:50px 0}}
@media(prefers-reduced-motion:reduce){.jf-products *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
