/* Shared portfolio navigation; product typography and colour remain native. */
.portfolio-context,.portfolio-footer{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;box-sizing:border-box;position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1180px,calc(100% - 40px));margin:0 auto;color:var(--muted,#a6aaa2);font-size:11px;line-height:1.5;letter-spacing:0}
.portfolio-context{min-height:38px;border-bottom:1px solid var(--line,#293029)}
.portfolio-context a,.portfolio-footer a{color:inherit;text-decoration:none}.portfolio-context a:hover,.portfolio-footer a:hover{color:var(--accent,var(--amber,#e8b59e))}
.portfolio-context>a{font-weight:500;white-space:nowrap}.portfolio-context details{position:relative;margin:0;padding:0;border:0;background:none;box-shadow:none}.portfolio-context summary{list-style:none;cursor:pointer;padding:8px 0;min-height:36px;display:flex;align-items:center;gap:12px;font-size:11px}.portfolio-context summary::-webkit-details-marker{display:none}.portfolio-context summary::after{content:"+";font-size:16px}.portfolio-context details[open] summary::after{content:"−"}
.portfolio-projects{position:absolute;right:0;top:100%;width:185px;padding:8px;border:1px solid var(--line,#293029);border-radius:6px;background:var(--bg,#111114);box-shadow:0 16px 35px #0005;display:grid;gap:2px}.portfolio-projects a{display:block;padding:10px;min-height:40px;font-size:12px}.portfolio-projects a[aria-current=page]{color:var(--accent,var(--amber,#e8b59e))}
.portfolio-footer{min-height:60px;justify-content:flex-start;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--line,#293029);font-size:10px}.portfolio-footer span{margin-right:auto}.portfolio-footer a{white-space:nowrap}
.portfolio-context :focus-visible,.portfolio-footer :focus-visible{outline:2px solid var(--accent,var(--amber,#e8b59e));outline-offset:3px}
@media(max-width:400px){.portfolio-footer{gap:10px 16px}.portfolio-footer span{width:100%}}

.ui-arrow{display:inline-block;width:14px;height:14px;vertical-align:-2px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:400px){.navigation{gap:14px}.navigation .nav-links a[href="#tolf"]{display:none}.navigation .nav-links{margin-left:auto;white-space:nowrap}.nav-purchase{white-space:nowrap;flex:none}}

@media(max-width:400px){.nav .brand span{display:none}}

/* One portfolio palette and type system; product artwork and motion stay native. */
:root{--bg:#111114;--bg-2:#19191e;--surface:#19191e;--panel:#19191e;--raised:#222228;--paper:#f2f0ec;--ink:#f2f0ec;--text:#f2f0ec;--muted:#aaa8ad;--faint:#88868d;--dim:#88868d;--line:#29282e;--line-soft:#222228;--accent:#e8b59e;--amber:#e8b59e;--amber-glow:#e8b59e40;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:var(--sans);color-scheme:dark}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
.portfolio-controls{display:flex;align-items:center;gap:20px}
.portfolio-theme{display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;background:none;color:var(--muted);cursor:pointer}
.portfolio-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.portfolio-theme:hover{color:var(--text)}
:root[data-theme=light]{color-scheme:light;--bg:#f2f0eb;--bg-2:#eae7e1;--surface:#eae7e1;--panel:#eae7e1;--raised:#e3dfd8;--paper:#19181d;--ink:#19181d;--text:#19181d;--muted:#65616c;--faint:#726d78;--dim:#726d78;--line:#d5d0ca;--line-soft:#e3dfd8;--accent:#8a4c38;--amber:#8a4c38;--amber-glow:#8a4c3820}
.product-drumloom .button.primary{color:var(--bg)}
.product-drumloom .button{border-color:var(--line);border-radius:4px;font-weight:500}
.product-drumloom .button.primary:hover{background:var(--text);border-color:var(--text)}
.product-drumloom .button:not(.primary):hover{background:var(--panel)}
.product-drumloom .signal{box-shadow:0 0 12px #e8b59e44}
.product-drumloom .hero-stage{background:radial-gradient(ellipse at 50% 48%,#e8b59e0c,transparent 66%)}
.product-drumloom .motion-control{background:var(--bg)}
.product-drumloom h1,.product-verdandi h1{font-weight:400;letter-spacing:-.055em}
.product-verdandi .portfolio-context,.product-verdandi .portfolio-footer{width:100%;max-width:1072px}
.product-verdandi .btn{border-radius:4px;font-weight:500}
.product-verdandi .btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.product-verdandi .btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.product-verdandi .btn:hover{border-color:var(--accent)}
.product-verdandi .oled-motion{display:block;margin:12px auto 0;border:1px solid var(--line);border-radius:4px;padding:8px 12px;background:transparent;color:var(--muted);font:11px var(--sans);cursor:pointer}
:root[data-theme=light] .product-run4 .nav{background:var(--bg)}
:root[data-theme=light] .product-run4 .hero-canvas{opacity:.15}
:root[data-theme=light] .product-run4 .chapter p,:root[data-theme=light] .product-run4 .chapter li{color:var(--muted)}
:root[data-theme=light] .product-verdandi kbd{background:var(--panel)}
@media(max-width:400px){.product-verdandi nav ul{gap:12px;font-size:12px}.product-verdandi nav ul li:last-child{display:none}.portfolio-controls{gap:14px}}

.portfolio-context{padding:0;flex-wrap:nowrap}.portfolio-footer{line-height:1.5}
.product-verdandi>.portfolio-context,.product-verdandi>.portfolio-footer{width:calc(100% - 40px)}

/* Product controls use the same theme-aware surfaces as the portfolio. */
.product-drumloom .view-switch{background:var(--surface)}
.product-drumloom .view-switch button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.product-drumloom .view-switch button:hover:not([aria-pressed=true]){background:var(--raised);color:var(--text)}
.product-drumloom .screen-window{background:var(--surface);border-color:var(--line)}
.product-drumloom .screen-bar span:last-child{color:var(--accent)}
.product-drumloom .pro-offer{background:var(--surface);border-color:var(--line)}
.product-drumloom .pro-offer .price{color:var(--text)}
.product-drumloom .skip-link{color:var(--bg)}
.product-verdandi .coffee-btn{border-color:var(--line)}
.product-verdandi h2{font-weight:400}

.product-run4{background:var(--bg)}
.product-run4 .navigation{background:transparent}
.product-run4 .section{border-bottom-color:var(--line)}
.product-run4 .video-play-icon{background:var(--bg)}
.product-run4 .video-play:hover .video-play-icon{background:var(--accent)}
.product-run4 .video-play:hover .video-play-icon:before{border-left-color:var(--bg)}

.product-drumloom .screen-window img{filter:hue-rotate(-78deg) saturate(.85)}

.product-run4 .nav-links{color:var(--muted)}
:root[data-theme=light] .product-run4 .hero .hero-canvas{mix-blend-mode:normal;opacity:1;mask-image:none}
:root[data-theme=light] .product-run4 #grain-sky{filter:invert(1);opacity:.5}

.product-run4 .footer-links{flex-wrap:wrap}

@media(max-width:400px){.product-drumloom .stage-note{max-width:140px;font-size:9px;bottom:14px}}

.portfolio-coffee{display:grid;place-items:center;width:30px;height:36px;color:var(--muted);flex-shrink:0}.portfolio-coffee svg{display:block;width:18px;height:18px}.portfolio-context .portfolio-coffee:hover{color:var(--accent)}