/* V2.27 — continuous TGC stage, regular hexagons and interlocking transitions. */
:root{--method-surface:#f2efe8}
.gravity-finale .gravity-finale-inner{padding-bottom:65px}
.gravity-finale .gravity-story-compact{width:100%;max-width:1180px;background:transparent;border:0;margin:48px auto 0;padding:0;gap:6%;text-align:left;position:relative;isolation:isolate}
.gravity-finale .gravity-story-compact .gravity-heart{font-size:clamp(24px,2.5vw,38px);max-width:560px;color:var(--paper);text-shadow:0 2px 15px #141516}
.gravity-finale .gravity-story-compact p{color:#f2efe8;text-shadow:0 2px 12px #141516}
.gravity-finale .gravity-story-compact .small-copy{color:#d0d1cf}
.gravity-finale .gravity-final-actions{margin-top:38px}
.pattern-transition{height:150px}.pattern-transition svg{overflow:hidden}
html[data-motion="on"] body main [data-scroll-fill]{background-image:linear-gradient(125deg,var(--fill-color,var(--ink)) 0%,var(--fill-color,var(--ink)) var(--fill-percent,0%),transparent var(--fill-percent,0%),transparent 100%)!important}
.gravity-chapter .gravity-evidence .development-title{color:#fff;--fill-color:#fff}
.gravity-chapter .gravity-cinema .gravity-panel{transition:transform .3s ease;transform:perspective(1100px) translateY(var(--hover-lift,0px)) rotateX(calc(var(--panel-rx,0deg) + var(--hover-rx,0deg))) rotateY(calc(var(--panel-ry,0deg) + var(--hover-ry,0deg)))}
.gravity-panel .game-image-window{border-radius:4px;box-shadow:0 0 0 1px #ffffff26;transition:box-shadow .3s}
html[data-motion="on"] .gravity-chapter .gravity-panel .game-image-window img{transform:scale(calc(var(--gallery-zoom,1) + var(--hover-zoom,0))) rotate(var(--hover-turn,0deg));transition:transform .35s ease}
@media(hover:hover) and (pointer:fine){html[data-motion="on"] .gravity-chapter .gravity-panel:hover{--hover-lift:-9px;--hover-zoom:.055;--hover-turn:-.7deg;z-index:2}.gravity-panel:hover .game-image-window{box-shadow:0 15px 35px #0008,0 0 0 2px var(--tgc-cyan)}}
.approach.section{position:relative;isolation:isolate;overflow:hidden;background:var(--method-surface);color:var(--ink);padding-top:55px;padding-bottom:65px}
.approach .section-label{position:relative;z-index:2;border-color:#1b202340}
.approach .room-opening{position:absolute;inset:0;z-index:-1;display:block;height:100%;width:100%;border:0;margin:0;overflow:hidden;pointer-events:none}
.approach .room-pattern{inset:0;height:100%;width:100%;color:#7157a8;opacity:.7}
.approach .room-pattern svg{width:100%;height:100%;transform:none}
.approach .room-pattern .pattern-line{display:none}.approach .room-pattern .hex-pigment{opacity:.35}
/* The original room-opening motif spans the whole section. */
.approach .method-pair{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:9%;position:relative;width:100%;margin:55px auto 25px}
.approach .method-title{min-width:0;position:relative;padding:30px;background:#ffffff75;border-radius:5px}
.approach .approach-heading{position:relative;inset:auto;text-align:left;z-index:1;pointer-events:none}
.approach .approach-heading h2{font-size:clamp(52px,5.6vw,100px);line-height:1.02;margin:0}
.approach .approach-heading [data-scroll-fill]{--fill-color:#1b2023;color:#1b2023}
.approach .approach-heading h2 em[data-scroll-fill]{font-size:1.5em;--fill-color:#7753b3;color:#7753b3}
.approach .method-copy{position:relative;z-index:1;width:100%;max-width:none;background:none;box-shadow:none;padding:0;color:var(--ink)}
.approach .method-copy .large{font-size:clamp(20px,1.7vw,27px);line-height:1.45;margin:0}
.approach .method-copy .method-note{font-size:14px;line-height:1.65;margin-top:24px}
.approach .room-pattern{opacity:.28}
.signature-footer .footer-directory .footer-linkedin .creator-credit{display:grid;gap:4px;line-height:1.2}
.creator-credit small{font-size:10px;opacity:.7}.creator-credit strong{font-size:14px}
.footer-linkedin .creator-credit{transition:transform .2s}.footer-linkedin:hover .creator-credit{transform:translateX(4px)}
@media(max-width:900px){.approach .method-pair{grid-template-columns:1fr;gap:32px;margin-top:30px}.approach .method-title{width:fit-content;max-width:100%;padding:24px}.approach .approach-heading h2{font-size:clamp(44px,9vw,76px)}.approach .method-copy .large{font-size:22px}}
@media(max-width:720px){
 .pattern-transition{height:108px}.gravity-finale .gravity-story-compact{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px}.gravity-finale .gravity-story-compact .gravity-heart{font-size:25px}.gravity-finale .gravity-story-compact p{font-size:14px}
 .approach.section{padding-top:34px;padding-bottom:38px}.approach .method-copy .large{font-size:20px}.approach .method-copy .method-note{font-size:13px}
}
html[data-motion="off"] .gravity-chapter .gravity-cinema .gravity-panel{transform:none}
@media(prefers-reduced-motion:reduce){html[data-motion] .gravity-chapter .gravity-cinema .gravity-panel,html[data-motion] .gravity-chapter .gravity-panel .game-image-window img{transform:none!important;transition:none!important}}

/* Let the full-width motif settle into the exact surface colour at both joins. */
.approach .room-opening{mask-image:linear-gradient(transparent,#000 95px,#000 calc(100% - 95px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 95px,#000 calc(100% - 95px),transparent)}

/* Light development chapter, with the original pink funding emphasis. */
:root{--facts-surface:#f2efe8}
.gravity-chapter .gravity-evidence{background:var(--facts-surface);color:#1b2023;--line:#1b202333}
.gravity-evidence .gravity-milestones,.gravity-evidence .gravity-milestone{border-color:#1b202333}
.gravity-chapter .gravity-evidence .development-title,.gravity-evidence .gravity-milestone:nth-child(2) .gravity-stat{color:#1b2023;--fill-color:#1b2023}
.gravity-chapter .gravity-evidence .gravity-milestone:nth-child(3) .gravity-stat{color:#d60d79;--fill-color:#d60d79}
.gravity-evidence .gravity-milestone p,.gravity-evidence .funding-source{color:#414548}
.gravity-chapter .gravity-evidence .gravity-milestone:last-child h3{color:#067b92;--fill-color:#067b92}
.gravity-evidence .next-step{color:#067b92;border-color:#067b9266;background:transparent}
/* Images communicate that work cards open; no corner arrows needed. */
.work-grid .project-media{border-radius:5px;transition:box-shadow .2s}
.work-grid .project:hover .project-media,.work-grid .project:focus-visible .project-media{box-shadow:0 0 0 2px var(--yellow)}
html[data-motion="on"] .work-grid .project:hover .project-media>img{transform:translateY(var(--image-drift,0px)) scale(calc(var(--gallery-zoom,1.025) + .05));transition:transform .35s ease}

/* The wordmark reacts through its star, without a highlighted text rectangle. */
a.jona-logo:hover,a.jona-logo:focus-visible,.footer-signature>a.jona-logo:hover{background:transparent;box-shadow:none;text-decoration:none;filter:none}
a.jona-logo::after{display:none!important}
.jona-logo .star-mark{transition:transform .4s;transform-origin:center}
.jona-logo:hover .star-mark,.jona-logo:focus-visible .star-mark{opacity:1;transform:translateY(.06em) rotate(90deg)}
@media(prefers-reduced-motion:reduce){.jona-logo .star-mark{transition:none!important;transform:none!important}}
html[data-motion="off"] .jona-logo .star-mark{transition:none!important;transform:translateY(.06em)!important}

/* Paint the correct neighbouring colour under fractional-pixel SVG edges. */
.pattern-transition.is-ready{background:linear-gradient(var(--transition-from) 50%,var(--transition-to) 50%)}
.pattern-transition svg{left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}
.pattern-transition::before,.pattern-transition::after{content:"";position:absolute;left:0;right:0;height:4px;z-index:2;pointer-events:none}.pattern-transition::before{top:0;background:var(--transition-from)}.pattern-transition::after{bottom:0;background:var(--transition-to)}

/* V2.29: one animated title hexagon, the original visible room-opening field. */
.approach .method-pair{grid-template-columns:1fr 1.1fr;gap:7%;margin:28px auto 10px}
.approach .method-title{display:grid;place-items:center;aspect-ratio:520/600;width:100%;max-width:480px;padding:0;background:none;border-radius:0;justify-self:center;isolation:isolate}
.method-title-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;fill:#f2efe8d9;stroke:#7157a8;stroke-width:2}
.method-title-frame polygon{vector-effect:non-scaling-stroke}
.approach .method-title .approach-heading{text-align:center;width:72%}
.approach .method-title .approach-heading h2{font-size:clamp(48px,4.5vw,76px)}
.approach .method-copy{padding:30px;background:#ffffffba;border-radius:5px}
.approach .room-pattern{opacity:.86}
.approach .room-pattern .hex-pigment{opacity:.6}
html[data-motion="on"] .method-title-frame{transform:rotate(calc((1 - var(--title-progress,0)) * -12deg)) scale(calc(.88 + var(--title-progress,0) * .12))}
html[data-motion="on"] .method-title-frame polygon{stroke-dasharray:1;stroke-dashoffset:calc((1 - var(--title-progress,0)) * 1)}
@media(max-width:900px){.approach .method-pair{grid-template-columns:1fr;gap:24px}.approach .method-title{max-width:360px}.approach .method-title .approach-heading h2{font-size:clamp(42px,9vw,64px)}.approach .method-copy{padding:24px}.approach .room-pattern{opacity:.76}}
@media(max-width:480px){.approach .method-title{max-width:290px}.approach .method-copy{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){html[data-motion] .method-title-frame{transform:none!important}.method-title-frame polygon{stroke-dashoffset:0!important}}

/* Review 231: yellow development milestone and compact mobile galleries. */
.gravity-chapter .gravity-evidence .gravity-milestone:nth-child(2) .gravity-stat { color:#ffbd32; --fill-color:#ffbd32; }
@media(max-width:720px) {
 .work-grid > .project:nth-child(n+5),
 .gravity-chapter .gravity-cinema .gravity-stage > .gravity-panel:nth-child(n+5) { display:none!important; }
}

/* 81 Fragments is the visible author of this tool collection. */
.tools .tool-forge-header { display:flex; align-items:center; gap:20px; width:fit-content; max-width:100%; margin:0 0 clamp(30px,4vw,56px); padding:12px 18px 12px 0; color:#b7eb65; text-decoration:none; border-radius:5px; transition:color .2s,background-color .2s; }
.tool-forge-header .forge-icon { display:block; flex:0 0 clamp(50px,5vw,76px); }
.tool-forge-header .forge-mark { display:block; width:100%; height:auto; }
.tool-forge-header .forge-brand-copy { display:flex; flex-direction:column; gap:7px; }
.tool-forge-header strong { font-size:clamp(27px,3.5vw,48px); font-weight:900; line-height:1; letter-spacing:-.045em; }
.tool-forge-header small { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--paper); }
.tools .tool-forge-header:hover,.tools .tool-forge-header:focus-visible { color:var(--paper); background:#b7eb6514; box-shadow:inset 0 -2px 0 #b7eb65; filter:none; }
@media(max-width:720px) { .tools .tool-forge-header { gap:14px; padding-right:8px; margin-bottom:30px; } .tool-forge-header small { font-size:9px; letter-spacing:.1em; } }

/* Review 233: consistent accents, visible hover and calmer room opening. */
.intro-logo .scroll-fill { --fill-color:#7760b5; }
.tools { --tool-accent:#b7eb65; }
.tools .tool-forge-header { color:var(--tool-accent); }
.tools h2 [data-scroll-fill] { --fill-color:var(--tool-accent); color:var(--tool-accent); }
.approach .method-copy { background:#ffffff61; }
.approach .room-pattern { color:#7760b5; }
.contact::before { width:52vw; right:-22vw; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
 html[data-motion="on"] .contact .contact-title h2 [data-scroll-fill],
 html[data-motion="on"] .contact .contact-title:hover h2 [data-scroll-fill],
 html[data-motion="on"] .contact .contact-title:focus-visible h2 [data-scroll-fill] {
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--fill-color,var(--ink));
  background-clip:text; -webkit-background-clip:text;
 }
}
@media(max-width:720px) { .contact::before { width:78vw; right:-43vw; } }
@media(prefers-reduced-motion:reduce) {
 html[data-motion="on"] .contact .contact-title h2 [data-scroll-fill] {
  color:var(--ink); -webkit-text-fill-color:var(--ink); -webkit-text-stroke:0;
 }
}

/* Solid ink at completion also covers glyph overhang from tight logo tracking. */
html[data-motion="on"] body main [data-scroll-fill].is-fill-complete { -webkit-text-fill-color:var(--fill-color,var(--ink))!important; }