/* Martin Wong Photo. Palette and type follow the original Wix theme. */
@font-face{font-family:"Jost";src:url(/fonts/jost-latin.woff2) format("woff2");font-weight:300 600;font-display:block}
/* ^ 2026-11-01 header jump fix: Jost (header, titles) is preloaded and lands with the first paint; "block" waits for it (max 3s) instead of painting
   one frame in a fallback font and then shifting the menu and logo text sideways under the frosted bar. */
@font-face{font-family:"Barlow";src:url(/fonts/barlow-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --white:#FFFFFF;--text-2:#DBDBDB;--black:#000000;--bg:#141414;--surface:#1F1F1F;--surface-2:#2A2A2A;
  --header:#404040;--gray:#8F8F8F;--line:#3A3A3A;
  --teal:#19ADB6;--teal-light:#4DD4DC;--teal-btn:#0E7C83;--badge:#E21C21;
  --head:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Barlow","DIN Next","Helvetica Neue",Arial,sans-serif;
  --max:1200px;--r:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--white);font:300 1rem/1.6 var(--body)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-light)}
a:hover{color:var(--white)}
h1,h2,h3,h4{font-family:var(--head);font-weight:300;letter-spacing:.08em;line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2rem,6vw,3.75rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,4vw,2.6rem);text-transform:uppercase}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--teal-light);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);color:var(--black);padding:.75rem 1rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.narrow{max-width:760px}
main{display:block;min-height:60vh}
.section{padding:3.5rem 0}
/* .section's shorthand wiped .wrap's side padding, so text sat flush on narrow screens. Gear list keeps its current look. */
@media (max-width:1239px){body:not(.gearlist) .wrap.section{padding-left:1.25rem;padding-right:1.25rem}}
.muted{color:var(--text-2)}
.small{font-size:.875rem}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:transparent;transition:transform .25s ease,opacity .25s ease,background-color .25s}
/* Clear header on every page (2026-10-30): transparent at the top like the home page; once scrolled (js/site.js adds .scrolled)
   a dark-to-clear gradient fades in behind it instead of a solid bar. Same .25s ease as the show/hide motion; the reduced-motion
   rule turns the transition off. Behind the menu text the gradient is about 65% black, so white text stays AA even over white. */
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,.66) 45%,rgba(0,0,0,.32) 75%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .25s ease}
.site-header.scrolled::before,body:not(.home) .site-header::before{opacity:1}
/* ^ 2026-11-01, Martin: every page except Home keeps the gradient at the very top again (as before 2026-10-31). Home stays gradient-free at the top. */
/* ^ Home (2026-10-31, Martin): NO gradient at the very top; it fades in only once .scrolled is set (past the hero, shown on scroll up)
   and fades out again (.25s) on the way back to the top. Menu text keeps its text-shadow for contrast over the photo. */
.site-header:has(.site-nav.open){background:var(--header)}
.site-header:has(.site-nav.open)::before{opacity:0!important}
.site-header .wrap{max-width:calc(980px + 2.5rem)}
.site-header .site-nav a{text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35)}
.site-header .logo,.site-header .acct{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.site-header .logo img,.site-header .nav-toggle svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
@media (min-width:1000px){.site-header .site-nav{margin:0 auto}.site-header .site-nav a{font-size:.85rem;font-weight:400}}
/* Slides and fades out on scroll down, back on scroll up (js/site.js). Reduced motion: the global rule removes the animation. */
.site-header.hdr-hidden{transform:translate3d(0,-100%,0);opacity:0}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--white);text-decoration:none;font-family:var(--head);letter-spacing:.2em;font-size:.95rem;text-transform:uppercase}
.logo img{width:22px;height:auto;aspect-ratio:22/51}  /* fixed ratio: no 0.3px nudge when the png (22x51.3 natural) loads */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;color:var(--white);cursor:pointer;border-radius:var(--r)}
.nav-toggle svg{width:26px;height:26px}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--header);border-top:1px solid #555;padding:.5rem 1.25rem 1.25rem}
.site-nav.open{display:block}
/* Open mobile menu: full-screen overlay under the header bar; scrolls on its own so every item is reachable in landscape */
@media (max-width:999px){
  .site-nav.open{position:fixed;inset:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:1;border-top:0;
    padding:calc(64px + env(safe-area-inset-top,0px) + .5rem) max(1.25rem,env(safe-area-inset-right,0px)) calc(1.25rem + env(safe-area-inset-bottom,0px)) max(1.25rem,env(safe-area-inset-left,0px))}
  .site-header:has(.site-nav.open){transform:none;opacity:1;transition:none}
  .site-header .bar>.logo,.site-header .bar>.nav-toggle{position:relative;z-index:2}
  /* close button: the bar stays pinned at the top over the scrolling list */
  .site-header:has(.site-nav.open) .bar{position:sticky;top:0}
  html.nav-lock{overflow:hidden}  /* html only: locking body too would make it the scroller and unstick the header */
  .nav-toggle[aria-expanded=true] svg path{d:path("M5 5L19 19M19 5L5 19")}
}
@media (max-width:999px) and (max-height:500px){
  .site-nav.open{padding-top:calc(56px + env(safe-area-inset-top,0px) + .25rem)}
  .site-nav a{padding:.45rem .25rem;font-size:.85rem;letter-spacing:.12em}
  .site-header .bar{min-height:56px}
}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.8rem .25rem;color:var(--white);text-decoration:none;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:.95rem}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--teal-light)}
@media (min-width:1000px){
  .nav-toggle{display:none}
  .site-nav{display:block;position:static;border:0;padding:0;background:none}
  .site-nav ul{display:flex;gap:1.3rem;flex-wrap:wrap}
  .site-nav a{padding:.5rem 0;font-size:.8rem}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.6rem;background:var(--teal-btn);color:var(--white);border:1px solid var(--teal-btn);border-radius:var(--r);font:400 .95rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal);border-color:var(--teal);color:var(--black)}
.btn.ghost{background:rgba(0,0,0,.55);border-color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--black)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn .chev::after{content:"\203A";font-size:1.3em;line-height:0}

/* Hero and full-bleed panels */
.panel{position:relative;min-height:72vh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.panel>picture,.panel>video,.panel>.panel-media{position:absolute;inset:0;z-index:-2}
.panel picture img,.panel video{width:100%;height:100%;object-fit:cover}
.panel:not(.hero)::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:-1}
.panel .inner{padding:3rem 1.25rem}
.panel h1,.panel h2{letter-spacing:.25em;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* Home hero: full screen photo, no overlay, parallax (js/site.js), like the Wix home page */
.home .site-header{position:fixed;left:0;right:0;top:0;background:transparent}
.home .site-header:has(.site-nav.open){background:var(--header)}
.home .site-header .wrap{max-width:calc(980px + 2.5rem)}
.home .site-header:not(.scrolled) .site-nav a{text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35)}
@media (min-width:1000px){.home .site-nav a{font-size:.85rem;font-weight:400}}
.home .site-header:not(.scrolled) .logo img,.home .site-header:not(.scrolled) .nav-toggle svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
@media (min-width:1000px){
  .home .site-nav{margin:0 auto}
  .home .site-nav ul{gap:2.75rem}
  .home .site-nav .nav-more{display:none}
}
.hero{display:block;place-items:normal;min-height:0;height:100vh;height:100svh;text-align:left;background:#2a2a2a}
.hero>.hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:53% 40%}
.hero .inner{max-width:calc(980px + 2.5rem);margin:0 auto;padding:clamp(5.5rem,12vh,7.5rem) 1.25rem 0}
.hero-title{margin:0;font:400 clamp(2.6rem,4.5vw,4.1rem)/1.18 var(--head);letter-spacing:.15em;text-transform:uppercase;color:var(--white);
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35)}
.hero-title span{display:block}
/* Home intro = the Wix home page's opening animation, measured frame by frame on the live Wix site 2026-10-30 (Playwright,
   clean cache, 1440x900 and 390x844, document.getAnimations()). Wix has no preloader, Lottie, GIF or logo-drawing effect:
   the "little animation" is its "Float In" entrance on every first-screen element, all starting together about 0.8s after
   the photo appears, easing cubic-bezier(.445,.05,.55,.95):
     logo slides in 60px from the left, 500ms | menu drops 60px from the top, 500ms | Log In slides 60px from the right, 500ms
     name rises 60px, 750ms | social row rises 60px, 1200ms | lower section titles and buttons rise 60px, 1200ms, together,
     when scrolled into view.
   The 0.8s photo-only hold matches Wix and Martin's ask to see the photo first. Only opacity and transform move, so nothing
   shifts. A tiny head script adds html.intro (skipped for reduced motion and without JS, so everything shows at once),
   html.intro-go once the hero photo has loaded (1.8s fallback) and html.intro-done when the sequence ends or on the first
   tap/key/wheel, which drops every entrance rule. Fill mode "backwards" only, so the header's hide/show is never overridden. */
@keyframes mw-float-in{from{opacity:0;transform:translate3d(var(--fx,0),var(--fy,60px),0)}to{opacity:1;transform:none}}
@keyframes mw-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.intro:not(.intro-go) .home .hero-title,html.intro:not(.intro-go) .home .hero-social,html.intro:not(.intro-go) .home .hero-hint,
  html.intro:not(.intro-go) .home .site-header .bar>*{opacity:0}
  html.intro-go:not(.intro-done) .home{--mw-ease:cubic-bezier(.445,.05,.55,.95);--mw-hold:800ms}
  html.intro-go:not(.intro-done) .home .hero-title{animation:mw-float-in 750ms var(--mw-ease) var(--mw-hold) backwards}
  html.intro-go:not(.intro-done) .home .hero-social{animation:mw-float-in 1200ms var(--mw-ease) var(--mw-hold) backwards}
  html.intro-go:not(.intro-done) .home .hero-hint{animation:mw-fade 1200ms var(--mw-ease) var(--mw-hold) backwards}
  html.intro-go:not(.intro-done) .home .site-header .bar>.logo{--fx:-60px;--fy:0px;animation:mw-float-in 500ms var(--mw-ease) var(--mw-hold) backwards}
  /* desktop menu drops in. Only at desktop widths: on phones the menu is display:none until opened, and opening it would
     replay this entrance and leave it invisible (the "menu button not working" bug, 2026-10-30). */
  @media (min-width:1000px){html.intro-go:not(.intro-done) .home .site-header .bar>.site-nav{--fx:0px;--fy:-60px;animation:mw-float-in 500ms var(--mw-ease) var(--mw-hold) backwards}}
  html.intro-go:not(.intro-done) .home .site-header .bar>.acct{--fx:60px;--fy:0px;animation:mw-float-in 500ms var(--mw-ease) var(--mw-hold) backwards}
  /* phone menu: the icon drops in from the top like the Wix menu, but the button itself never moves, so a tap always lands on it */
  html.intro-go:not(.intro-done) .home .site-header .bar>.nav-toggle svg{--fx:0px;--fy:-60px;animation:mw-float-in 500ms var(--mw-ease) var(--mw-hold) backwards}
  html.intro .home .panel:not(.hero) .inner>:not(.rise-in){opacity:0}
  html.intro .home .panel:not(.hero) .inner>.rise-in{animation:mw-float-in 1200ms cubic-bezier(.445,.05,.55,.95) backwards}
}
.hero-social{position:absolute;left:0;right:0;bottom:max(.5rem,env(safe-area-inset-bottom))}
.hero-social .social{margin:0;gap:0}
.hero-social .social a:hover{background:rgba(0,0,0,.35)}
.hero-social img{width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
/* Hero scroll hint (2026-10-31): thin chevron centred just above the 48px social row, slow fade 40-90% and a 6px drift on a 2s loop.
   js/site.js adds .gone after ~40px of scroll. 44px tap target. Reduced motion: static (global rule stops the animation). */
.hero-hint{position:absolute;left:50%;bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + 52px);width:44px;height:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:opacity .4s ease,visibility .4s}
.hero-hint svg{display:block;width:28px;height:16px;opacity:.75;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.3));
  animation:mw-hint 2s ease-in-out infinite}
.hero-hint:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.hero-hint.gone{opacity:0;visibility:hidden;pointer-events:none}
@keyframes mw-hint{0%,100%{opacity:.4;transform:translate3d(0,0,0)}50%{opacity:.9;transform:translate3d(0,6px,0)}}
@media (max-width:339px){.hero-hint{bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + 100px)}}   /* social row wraps to two lines */
@media (prefers-reduced-motion:reduce){.hero-hint svg{animation:none;opacity:.8}}

/* Grids and cards */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.tile{position:relative;display:block;color:var(--white);text-decoration:none;background:var(--surface);border-radius:var(--r);overflow:hidden}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s}
.tile.wide img{aspect-ratio:3/2}
.tile:hover img{transform:scale(1.03)}
.tile .cap{padding:.9rem 1rem}
.tile .cap h3{margin:0 0 .25rem;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase}
.tile.overlay .cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding-top:3rem}
.tile .ribbon{position:absolute;top:.75rem;left:.75rem;background:var(--teal-btn);color:var(--white);font:500 .75rem/1 var(--head);letter-spacing:.12em;padding:.4rem .6rem;border-radius:2px;text-transform:uppercase}
.tile.free-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:100%;border:2px dashed var(--teal);padding:2rem 1.25rem;background:var(--surface)}
.tile.free-tile .big{font:300 3rem/1 var(--head);letter-spacing:.2em;color:var(--teal-light);margin-bottom:.75rem}
.price{font-family:var(--head);letter-spacing:.05em}
.price s{color:var(--gray);margin-right:.5rem}
.price .sale{color:var(--teal-light)}

/* Product page */
.product{display:grid;gap:2rem;padding:2.5rem 0}
@media (min-width:900px){.product{grid-template-columns:1.15fr 1fr;align-items:start}}
.gallery .main{background:var(--surface);border-radius:var(--r);overflow:hidden}
.gallery .main img,.gallery .main video{width:100%;max-height:80vh;object-fit:contain;background:#000}
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;list-style:none;padding:0}
.thumbs button{padding:0;border:2px solid transparent;background:none;border-radius:var(--r);cursor:pointer;width:72px;height:72px;overflow:hidden}
.thumbs button[aria-current=true]{border-color:var(--teal)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .vid{display:grid;place-items:center;height:100%;background:var(--surface-2);color:var(--white);font:500 .7rem var(--head);letter-spacing:.1em}
.buy label{display:block;font:400 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase;margin:1rem 0 .35rem}
select,input[type=email],input[type=text],input[type=tel],input[type=number],textarea{width:100%;min-height:48px;padding:.7rem .85rem;background:var(--surface);color:var(--white);border:1px solid #6b6b6b;border-radius:var(--r);font:inherit}
input[type=number]{max-width:7rem}
textarea{min-height:9rem;resize:vertical}
.buy .btn{width:100%;margin-top:1.25rem}
details{border-top:1px solid var(--line);padding:.25rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:.9rem 0;font:400 .95rem var(--head);letter-spacing:.12em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;line-height:1}
details[open] summary::after{content:"\2212"}
.desc p{white-space:pre-line}
.notice{border-left:3px solid var(--teal);background:var(--surface);padding:.9rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:1rem 0}
.notice.warn{border-color:#E0A23B}
.notice.err{border-color:var(--badge)}
.status{min-height:1.5em;margin-top:.75rem}

/* Email gate */
.gate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.75rem 1.5rem;margin:2rem 0}
.gate form{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.gate .field{flex:1 1 240px}
.gate .btn{flex:0 0 auto}
.gate.band{margin:0;border-radius:0;border-left:0;border-right:0;text-align:center}
.gate.band form{max-width:620px;margin:1rem auto 0}

/* Before / after */
.ba{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface-2);aspect-ratio:3/2;user-select:none}
/* drag anywhere on the photos: horizontal drags move the divider, vertical swipes still scroll the page */
.ba{touch-action:pan-y;-webkit-user-select:none;-webkit-touch-callout:none;cursor:ew-resize;overflow-x:clip}
.ba img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.ba-wrap{overflow-x:clip;max-width:100%}
.ba .layer{position:absolute;inset:0}
.ba .layer img{width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .slot{display:grid;place-items:center;height:100%;text-align:center;padding:1rem;font:400 .9rem/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;border:2px dashed #777}
.ba .slot.before-slot{background:#262626;color:var(--text-2)}
.ba .slot.after-slot{background:#123437;color:var(--white)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--white);transform:translateX(-1px);pointer-events:none}
.ba .handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center;font-size:1.2rem}
.ba .tag{position:absolute;top:.75rem;padding:.25rem .5rem;background:rgba(0,0,0,.65);font:400 .7rem var(--head);letter-spacing:.14em;text-transform:uppercase;z-index:2}
.ba .tag.l{left:.75rem}.ba .tag.r{right:.75rem}
.ba-range{width:100%;margin-top:.6rem;accent-color:var(--teal)}
figure{margin:0}
figcaption{margin-top:.4rem;color:var(--text-2);font-size:.9rem}

/* Videos */
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.yt button{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer;color:var(--white)}
.yt button img{width:100%;height:100%;object-fit:cover}
.yt .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:50px;border-radius:12px;background:rgba(0,0,0,.75);display:grid;place-items:center}
.yt button:hover .play,.yt button:focus-visible .play{background:var(--badge)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Blog */
.post-meta{color:var(--text-2);font-size:.9rem;margin-bottom:1.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 2rem}
.chips a{display:inline-block;padding:.45rem .85rem;border:1px solid #666;border-radius:999px;color:var(--white);text-decoration:none;font-size:.85rem;letter-spacing:.05em}
.chips a[aria-current=page],.chips a:hover{border-color:var(--teal);color:var(--teal-light)}
.post-body p{overflow-wrap:anywhere}
.post-body img{margin:1.5rem 0;border-radius:var(--r)}

/* Portfolio gallery and lightbox */
.masonry{columns:1;column-gap:1rem}
@media (min-width:640px){.masonry{columns:2}}
@media (min-width:1000px){.masonry{columns:3}}
.masonry button{display:block;width:100%;margin:0 0 1rem;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid;border-radius:var(--r);overflow:hidden}
dialog.lightbox{padding:0;border:0;background:rgba(0,0,0,.95);max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--white)}
dialog.lightbox::backdrop{background:rgba(0,0,0,.9)}
dialog.lightbox .lb-img{width:100%;height:100%;object-fit:contain;padding:3.5rem 4rem}
dialog.lightbox .lb-btn{position:absolute;background:rgba(0,0,0,.6);border:1px solid #777;color:var(--white);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.4rem}
.lb-close{top:1rem;right:1rem}.lb-prev{left:1rem;top:50%}.lb-next{right:1rem;top:50%}

/* Footer */
.site-footer{background:#0a0a0a;border-top:1px solid var(--line);padding:2.5rem 0 2rem;margin-top:0}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;padding:0;margin:1.5rem 0}
.social a{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%}
.social a:hover{background:var(--surface-2)}
.social img{width:26px;height:26px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem;list-style:none;padding:0;margin:0 0 1rem;font-size:.9rem}
.foot-links a{color:var(--text-2);text-decoration:none;display:inline-block;padding:.35rem 0}
.foot-links a:hover{color:var(--white)}
.copy{color:var(--text-2);font-size:.8rem;text-align:center;margin:0}

/* Tables (gear list) */
.gear{width:100%;border-collapse:collapse}
.gear th,.gear td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.gear th{font:400 .8rem var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.gear td a{overflow-wrap:anywhere}

.archive{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.archive li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;align-items:center;background:var(--surface);padding:1rem 1.25rem;border-radius:var(--r)}
.badge{display:inline-block;padding:.3rem .6rem;border-radius:2px;font:500 .72rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--teal);color:var(--teal-light)}
.badge.paid{border-color:#E0A23B;color:#F2C46D}
.placeholder-note{font-size:.8rem;color:#F2C46D}
.status.ok{color:#7FE0A6}
.status.err{color:#FF8A8A}
.tile .cap .price{margin:0}
.gate h2{font-size:clamp(1.3rem,3vw,1.8rem)}
.site-footer{padding-top:0}.site-footer>.wrap{padding-top:2rem}
#monthly-current{min-height:calc(100vh - 160px)}

/* Presets & LUTs page */
.pl-jump{margin:0 0 1rem;font:400 .85rem var(--head);letter-spacing:.12em;text-transform:uppercase}
.pl-jump a{color:var(--text-2)}
.pl-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.pl-filter[hidden]{display:none}
.chip-btn{min-height:44px;padding:.45rem 1.1rem;border:1px solid #666;border-radius:999px;background:none;color:var(--white);font:400 .85rem var(--head);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.chip-btn:hover,.chip-btn[aria-pressed=true]{border-color:var(--teal);color:var(--teal-light)}
.chip-btn[aria-pressed=true]{background:rgba(255,255,255,.06)}
.pl-section{margin:0 0 3rem;scroll-margin-top:80px}
.pl-section[hidden]{display:none}

/* Contact page (2026-10-30): same shared header, nav, active state, h1, .wrap margins, form fields and footer as every other page.
   Only the content is contact-specific: Martin's full photo fixed behind the page (centred 50% 50% so his whole face shows,
   plain cover crop, flat grey tint for contrast), portrait, info, social icons, form. The menu gradient stays at the top (approved). */
.contact-stage{position:relative;isolation:isolate}
.contact-bg{position:fixed;inset:0;z-index:-1;background:#2a2a2a}
/* 2026-11-01 banner jump fix: fixed to the LARGE viewport height, so the photo doesn't resize and re-crop when a phone's address bar slides back in on scroll up */
.contact-bg{bottom:auto;height:100vh;height:100lvh}
.contact-bg picture,.contact-bg img{display:block;width:100%;height:100%}
.contact-bg img{object-fit:cover;object-position:50% 50%}
.contact-bg::after{content:"";position:absolute;inset:0;background:rgba(35,34,34,.88)}
.contact-wrap{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px)}
.contact-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem 4rem;align-items:start;margin-top:1.5rem}
.contact-portrait{width:215px;aspect-ratio:1/1;margin:0 0 1.25rem;overflow:hidden;border-radius:var(--r)}
.contact-portrait picture,.contact-portrait img{display:block;width:100%;height:100%}
.contact-portrait img{object-fit:cover;object-position:50% 50%}
.contact-name{margin:0 0 1rem;font:400 .95rem/1.5 var(--head);letter-spacing:.14em;text-transform:uppercase}
.contact-lines{margin:0;font:400 .95rem/1.6 var(--head);letter-spacing:.08em}
.contact-lines a{color:var(--white);text-decoration:none}
.contact-lines a:hover,.contact-lines a:focus-visible{color:var(--teal-light);text-decoration:underline}
.contact-social{justify-content:flex-start;margin:.75rem 0 0 -11px;gap:0}
.contact-social a{width:44px;height:44px}
.contact-social img{width:22px;height:22px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
.cf-field label{display:block;font:400 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .35rem}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--teal-light)}
.cf-wide{grid-column:1/-1}
.cf-send{grid-column:1/-1;margin:.25rem 0 0}
.contact-form .status{grid-column:1/-1;margin:0}
.contact-form .status:empty{display:none}
@media (max-width:899px){.contact-cols{grid-template-columns:1fr}}
/* No page scroll on laptop/desktop screens (Martin 2026-10-30): header + content + slim footer fill exactly one screen. */
.site-footer.compact{position:relative;z-index:1;padding:0;background:rgba(10,10,10,.82);border-top:1px solid var(--line)}
.site-footer.compact>.wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;padding-top:.3rem;padding-bottom:.3rem}
.site-footer.compact .social{margin:0;gap:0}
.site-footer.compact .social a{width:44px;height:44px}
.site-footer.compact .social img{width:22px;height:22px}
.site-footer.compact .copy{margin:0;font-size:.85rem;color:var(--text-2)}
@media (max-width:599px){.site-footer.compact>.wrap{justify-content:center;text-align:center;padding-bottom:.75rem}}
@media (min-width:900px){
  .contact-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  .contact-page main{flex:1 0 auto;min-height:0}
  .contact-page .contact-wrap{min-height:0}
}
@media (min-width:900px) and (max-height:820px){
  .contact-page .contact-wrap.section{padding-top:2.25rem;padding-bottom:1.5rem}
  .contact-page .contact-cols{margin-top:.75rem}
  .contact-page .contact-form{row-gap:.75rem}
  .contact-page .contact-form textarea{min-height:7rem}
}
@media (max-width:599px){
  .contact-portrait{width:183px}
  .contact-form{grid-template-columns:1fr}
  .cf-send .btn{width:100%}
}
/* Home "Videos" background loop (drone footage). Poster picture sits under the video; reduced motion shows only the poster. */
.panel-vid>.bg-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.panel-vid .inner{text-shadow:0 1px 8px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.panel-vid>.bg-video{display:none}}
/* Background video: never show native UI (iOS shows a start-playback button when autoplay is blocked, e.g. Low Power Mode).
   One rule per pseudo-element: an unknown pseudo-element in a selector list would invalidate the whole list. */
.bg-video{transition:opacity .4s ease}
.bg-video.bgv-wait{opacity:0}
.bg-video::-webkit-media-controls{display:none!important}
.bg-video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none}
.bg-video::-webkit-media-controls-panel-container{display:none!important}
.bg-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.bg-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.bg-video::-webkit-media-controls-play-button{display:none!important;-webkit-appearance:none}
.bg-video::-webkit-media-controls-enclosure{display:none!important}
.bg-video::-webkit-media-controls-overlay-enclosure{display:none!important}
/* Home parallax + scroll-linked dimming (js/site.js). Media layers are oversized by --pxs above and below so the drift never shows an edge;
   object-position keeps the faces inside the frame for the whole drift. Dimming is a black ::after layer, never a filter on the photo. */
.px-on .home .panel::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);z-index:-1;pointer-events:none}
.home .panel:not(.hero) .inner{text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45)}
.home .panel:not(.hero) h2{text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.5)}
/* a <video> is a replaced element: height:auto would use its own aspect ratio instead of stretching, so give it the oversized height explicitly */
.px-on .home .site-footer .band>*{will-change:transform}
.px-lite .home .site-footer .band>*{will-change:auto}
@media (prefers-reduced-motion:reduce){.px-on .home .panel::after{opacity:0}.px-on .home .panel>picture,.px-on .home .panel>video{transform:none!important}}
/* Home sections, Wix-style "reveal" (Martin 2026-10-30): each section is most of a screen (84svh, so the next one always peeks in),
   and its photo or video is pinned to the viewport while the section's edges slide over it, so the next image is uncovered already
   in place. Done with position:fixed inside clip-path:inset(0) (clip-path also clips fixed children; background-attachment:fixed
   is ignored on iOS). Pure compositing, no scroll JS. Sized with lvh so iOS/Android toolbar changes never re-crop the photo.
   Plain object-fit:cover crops only; the focal points below keep the faces and the baked-in BEFORE / AFTER text in frame.
   Titles and buttons scroll with the section, in the left column like the hero (Wix places them in the upper third). */
.home .panel:not(.hero){min-height:84vh;min-height:84svh;clip-path:inset(0);place-items:start stretch;text-align:left}
.home .panel:not(.hero)>picture,.home .panel:not(.hero)>.panel-media,.home .panel:not(.hero)>video{position:fixed;top:0;left:0;right:auto;bottom:auto;width:100%;height:100vh;height:100lvh}
.home .panel:not(.hero) .inner{width:100%;max-width:calc(980px + 2.5rem);margin:0 auto;padding:clamp(4.5rem,22svh,12rem) 1.25rem 3rem}
.home .panel:not(.hero) h2{margin:0 0 .6rem;font-size:clamp(2.2rem,4.2vw,3.6rem);font-weight:300}
.home .panel:not(.hero) .inner p{margin:0;display:flex;flex-wrap:wrap;gap:.75rem}
.home .panel[aria-label="Presets"] img{object-position:50% 50%}
.home .panel[aria-label="Portfolio"] img{object-position:66% 45%}
.home .panel-vid img,.home .panel-vid video{object-position:50% 50%}
@media (max-aspect-ratio:4/5){.home .panel:not(.hero) .inner{padding-top:clamp(4.5rem,14svh,8rem)}}
@media (orientation:landscape) and (max-height:500px){.home .panel[aria-label="Presets"] img{object-position:50% 62%}
  .home .panel:not(.hero) .inner{padding-top:4.5rem}}
@media (prefers-reduced-motion:reduce){.home .panel:not(.hero){clip-path:none}
  .home .panel:not(.hero)>picture,.home .panel:not(.hero)>.panel-media,.home .panel:not(.hero)>video{position:absolute;inset:0;width:auto;height:auto}}
/* Forms: nothing may be wider than its card; long button labels wrap instead of overflowing */
form .btn,form input,form select,form textarea{max-width:100%}
form .btn{white-space:normal;text-align:center;line-height:1.25}
.gate .field{min-width:0}
.gate form{margin-bottom:0}
.gate form .status{margin:0}
.gate form .status:empty{min-height:0}
.gate>:last-child{margin-bottom:0}
@media (max-width:600px){
  form .btn,form input[type=email],form input[type=text],form input[type=tel],form select,form textarea{width:100%}
  .gate .field,.gate .btn{flex:1 1 100%}
  form .btn{letter-spacing:.08em;padding:.75rem 1rem}
  .gate{padding:1.5rem 1.25rem}
}
/* Membership: monthly pair, locked cards, plan comparison, members page */
.pair{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.pair-h{margin-top:1.5rem}
.preset-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;min-width:0}
.preset-card h3{margin:.25rem 0 .5rem;font-size:1.15rem}
.preset-card .gate.in-card{margin:1rem 0 0;padding:0;border:0;background:none}
.preset-card .gate.in-card h2{font-size:1.05rem}
.locked-media{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.locked-media img,.locked-media .slot{width:100%;height:100%;object-fit:cover}
.locked-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.lock-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);border:1px solid var(--white);color:var(--white)}
.unlock{margin-top:1rem}
.badge.lock{border-color:var(--gray);color:var(--text-2)}
.archive li.past-month{display:block}
.archive li.past-month h3{margin:0 0 .75rem;font-size:1rem;letter-spacing:.1em}
.preset-card.mini{display:grid;grid-template-columns:120px 1fr;gap:.9rem;align-items:center;padding:.75rem;background:var(--surface-2)}
.preset-card.mini h4{margin:.4rem 0 0;font-size:.95rem}
.plans{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch;margin:1rem 0}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.25rem;min-width:0}
.plan.best{border:2px solid var(--teal);box-shadow:0 0 0 4px rgba(25,173,182,.12)}
.best-tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);margin:0;background:var(--teal);color:var(--black);font:500 .72rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border-radius:2px;white-space:nowrap}
.plan h3{margin:.25rem 0 .5rem;letter-spacing:.14em;text-transform:uppercase}
.plan-price{margin:0 0 1rem;font-family:var(--head)}
.plan-price .amt{font-size:2.4rem;letter-spacing:.02em}
.plan-price .per{color:var(--gray);margin-left:.25rem}
.plan-tagline{margin:-.5rem 0 1rem;color:var(--gray);font-size:.95rem;line-height:1.45}
.ticks{list-style:none;padding:0;margin:0 0 1.25rem;flex:1}
.ticks li{position:relative;padding:.35rem 0 .35rem 1.6rem;border-top:1px solid var(--line)}
.ticks li::before{content:"\2713";position:absolute;left:.2rem;color:var(--teal-light)}
.plan .btn{width:100%}
.plan .btn[aria-disabled=true]{opacity:.75}
.benefits{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.benefits li{background:var(--surface);border-radius:var(--r);padding:1rem 1.1rem}
.benefits strong{display:block;font-family:var(--head);letter-spacing:.06em;margin-bottom:.25rem}
.benefits span{color:var(--text-2)}
.steps{padding-left:1.25rem}.steps li{margin:.5rem 0}
.member-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin:1rem 0 1.5rem}
.member-month h2{font-size:1.1rem;margin:1.5rem 0 .75rem}
.member-promo{margin-top:2rem}

/* ===== Portfolio: full-bleed justified rows (every photo uncropped) + full-screen lightbox ===== */
.port-head{padding-bottom:1.25rem}
.jg{--rh:clamp(240px,32vw,640px);--gap:5px;display:flex;flex-wrap:wrap;gap:var(--gap);width:100%;margin:0 0 var(--gap)}
.jg::after{content:"";flex:100000 1 0}            /* last row keeps natural size instead of blowing up */
.jg-i{position:relative;display:block;flex:calc(var(--ar)*100) 1 calc(var(--ar)*var(--rh));max-width:100%;background:#0b0b0b;overflow:hidden;cursor:zoom-in;color:var(--white);text-decoration:none}
.jg-i picture,.jg-i img{display:block;width:100%;height:auto}
.jg-i img{transition:transform .5s ease,opacity .3s}
.jg-i:hover img{transform:scale(1.02)}
.jg-i:focus-visible{outline:2px solid var(--teal-light);outline-offset:-2px}
.jg-big{--rh:clamp(300px,36vw,760px)}
.jg-big .jg-i{cursor:pointer}
.jg-cap{position:absolute;inset:auto 0 0 0;padding:4rem 1.25rem 1.1rem;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.jg-cap .h{font:300 clamp(1.1rem,1.6vw,1.6rem)/1 var(--head);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (max-width:639px){.jg-big .jg-i{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.jg-i img{transition:none}.jg-i:hover img{transform:none}}
.port-more{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:center;padding:2rem 1.25rem 2.5rem;font:400 .8rem/1.4 var(--head);letter-spacing:.15em;text-transform:uppercase}
.port-more a{color:var(--muted,#aaa);text-decoration:none}.port-more a:hover,.port-more a[aria-current]{color:var(--teal-light)}

dialog.lightbox{position:fixed;inset:0;padding:0;margin:0;border:0;background:#000;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;color:var(--white);overflow:hidden;overscroll-behavior:contain}
dialog.lightbox::backdrop{background:#000}
html.lb-open{overflow:hidden}
.lb-stage{position:absolute;inset:0}
dialog.lightbox .lb-img{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:contain;opacity:0;transition:opacity .2s;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
dialog.lightbox .lb-img.on{opacity:1}
.lb-count{position:absolute;top:max(1rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));margin:0;font:400 .8rem/1 var(--head);letter-spacing:.15em;color:#ddd;background:rgba(0,0,0,.45);padding:.45rem .65rem;border-radius:2px;z-index:2}
dialog.lightbox .lb-btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;opacity:.8;transition:opacity .2s,background .2s}
dialog.lightbox .lb-btn:hover,dialog.lightbox .lb-btn:focus-visible{opacity:1;background:rgba(0,0,0,.7)}
dialog.lightbox .lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
dialog.lightbox .lb-close{top:max(.5rem,env(safe-area-inset-top));right:max(.5rem,env(safe-area-inset-right))}
dialog.lightbox .lb-prev{left:max(.5rem,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
dialog.lightbox .lb-next{right:max(.5rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
@media (hover:none){dialog.lightbox .lb-prev,dialog.lightbox .lb-next{opacity:.55}}
/* Portfolio index: full-width tiles (cropped only here; galleries and the lightbox show the whole photo) */
.ptiles{display:grid;gap:5px;grid-template-columns:1fr;width:100%;margin-bottom:5px}
@media (min-width:640px){.ptiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ptiles{grid-template-columns:repeat(4,1fr)}}
.ptile{position:relative;display:block;overflow:hidden;background:#0b0b0b;color:var(--white);text-decoration:none}
.ptile img{display:block;width:100%;height:auto;transition:transform .6s ease}
@media (min-width:640px){.ptile img{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:50% 25%}}
/* Short/ultrawide screens (e.g. 1830x570): a 3:4 tile is taller than the screen, so you only ever saw part of each photo
   and scrolling revealed the rest in a rush (read as a zoom-out snap). Cap the tile so a whole row fits under the 64px header.
   Plain crop via object-fit:cover; the cap is static (svh), so it never changes while scrolling. */
@media (min-width:640px){.ptile img{max-height:max(300px,calc(100vh - 88px));max-height:max(300px,calc(100svh - 88px))}}
@media (min-width:640px) and (max-height:760px){.port-head.section{padding-top:1.75rem;padding-bottom:1rem}.port-head h1{margin-bottom:.35em}}
.ptile:hover img{transform:scale(1.03)}
.ptile:focus-visible{outline:2px solid var(--teal-light);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.ptile img{transition:none}.ptile:hover img{transform:none}}

/* ---- Bundles, frequently bought together, checkout upsell ---- */
.bundles{margin:3rem 0 1rem}
.bundle-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:860px){.bundle-grid{grid-template-columns:1fr 1fr}}
.bundle-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.bc-imgs{display:flex;gap:2px;background:var(--black)}
.bc-img{flex:1 1 0;min-width:0}
.bc-img img{width:100%;aspect-ratio:1;object-fit:cover}
.bc-body{padding:1.1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.bc-name{margin:0;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase}
.bc-body p{margin:0}
.bc-items{margin:.25rem 0 .5rem;padding-left:1.1rem}
.bc-items li{margin:.15rem 0}
.bc-price{font-size:1.1rem;margin:.25rem 0 .75rem!important}
.bc-price s{color:var(--gray)}
.save{display:inline-block;background:var(--teal-btn);color:#fff;font-size:.8rem;padding:.1rem .5rem;border-radius:999px;margin-left:.35rem;vertical-align:middle;white-space:nowrap}
.bc-body .btn{align-self:flex-start;margin-top:auto}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.fbt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.25rem 1rem;margin:2.5rem 0 0}
.fbt h2{margin-top:0;font-size:clamp(1.2rem,2.6vw,1.5rem)}
.fbt-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media (min-width:860px){.fbt-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fbt-item{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.fbt-item label{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1 1 auto;cursor:pointer}
.fbt-item input{width:1.15rem;height:1.15rem;accent-color:var(--teal);flex:0 0 auto}
.fbt-img{flex:0 0 64px;width:64px}
.fbt-img img{width:64px;height:64px;object-fit:cover;border-radius:var(--r)}
.fbt-txt{min-width:0;display:flex;flex-direction:column}
.fbt-name{overflow-wrap:anywhere}
.fbt-price{color:var(--text-2)}
.fbt-total{margin:1rem 0 .5rem;font-size:1.1rem}
.upsell-box{flex-basis:100%;background:var(--surface-2);border:1px solid var(--teal-btn);border-radius:var(--r);padding:1rem;margin-top:.5rem}
.upsell-box .up-q{margin:0 0 .75rem;font-weight:500}
.upsell-box .btn{margin:.25rem 0}
.pp-upsell{text-align:left;margin-top:2.5rem}

/* ---- Free starter guide ---- */
.gp-kicker{color:var(--teal-light);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:500;margin:0}
.gp-title{font-family:var(--head);font-size:1.35rem;letter-spacing:.04em;margin:.1rem 0 .3rem}
.guide-promo{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r);padding:1.1rem 1.25rem;margin:2.5rem 0 0}
.guide-promo p{margin:0 0 .4rem}
.guide-promo.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin:1.25rem 0 1.5rem}
.guide-promo.bar p{margin:0}
.guide-promo.bar .small{flex:1 1 220px}
.home-guide{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0}
.home-guide .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.home-guide p{margin:0;font-size:1.1rem}
.home-guide .gp-kicker{display:inline;margin-right:.5rem}
.guide-hero{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.guide-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem}}
.guide-cover-wrap{max-width:360px;width:100%;margin:0 auto}
.guide-cover,.guide-cover-img{width:100%;aspect-ratio:8.5/11;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset}
.guide-cover{display:flex;flex-direction:column;justify-content:center;padding:2rem 1.75rem;background:linear-gradient(160deg,#1d2a2b 0%,#0f1415 55%,#060707 100%);border:1px solid #2c3b3c;position:relative;overflow:hidden}
.guide-cover::before{content:"";position:absolute;right:-30%;top:-18%;width:90%;aspect-ratio:1;border-radius:50%;border:18px solid rgba(25,173,182,.22)}
.gc-k{color:var(--teal-light);text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;position:relative}
.gc-t{font-family:var(--head);font-size:clamp(2rem,7vw,2.6rem);line-height:1.05;text-transform:uppercase;letter-spacing:.04em;margin:.6rem 0 1rem;position:relative}
.gc-a{color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;position:relative}
.gc-ph{position:absolute;left:0;right:0;bottom:.75rem;text-align:center;color:var(--gray);font-size:.7rem;letter-spacing:.08em}
.guide-copy h1{margin:.25rem 0 .75rem}
.guide-copy .lead{font-size:1.15rem;color:var(--text-2)}
.small-h{font-size:1.15rem;margin:1.5rem 0 .25rem}
.gate.in-guide{background:none;border:0;padding:0;margin:.5rem 0 0}
.guide-inside{columns:1;padding-left:1.2rem}
@media (min-width:860px){.guide-inside{columns:2;column-gap:3rem}}
.guide-inside li{break-inside:avoid;margin:.3rem 0}
.guide section{margin-top:3rem}
.js-fbt-buy[hidden],.upsell-box[hidden],.js-fbt-note[hidden],.fbt input[hidden]{display:none!important}

/* ---------- Accounts: header slot + /account/ pages ---------- */
.acct{display:flex;align-items:center;position:relative;margin-left:auto}
.site-header .bar>.acct{order:1}.site-header .bar>.nav-toggle{order:2}
@media (min-width:1000px){.site-header .bar>.acct{order:0;margin-left:1.5rem}}
.acct[hidden]{display:none}
/* 2026-11-01 menu jump fix (Martin: "the top menu bar jumps every time I go to a new page"): the account slot starts [hidden] and
   js/account.js fills it with "Sign In" (or the avatar) only after /api/account/me answers, 150-400ms after first paint. The menu is
   centred between the logo and this slot (margin:0 auto), so when the slot appeared the whole menu slid ~64px left on every page.
   On desktop the slot now always keeps its box (88px, the width of "Sign In"), just invisible until filled, so nothing moves. */
@media (min-width:1000px){.site-header .bar>.acct{min-width:88px;justify-content:flex-end}.site-header .bar>.acct[hidden]{display:flex;visibility:hidden}}
.acct-signin{color:var(--white);text-decoration:none;font:400 .8rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;padding:.6rem .8rem;border:1px solid rgba(255,255,255,.6);border-radius:var(--r);white-space:nowrap}
.acct-signin:hover{background:var(--white);color:var(--black)}
.acct-avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--teal-light);background:var(--teal-btn);color:var(--white);font:500 1rem/1 var(--head);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.acct-menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.5);padding:.4rem 0;z-index:60}
.acct-menu[hidden]{display:none}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:.7rem 1rem;color:var(--white);text-decoration:none;background:none;border:0;font:400 .95rem/1.2 var(--body);cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a:focus-visible,.acct-menu button:focus-visible{background:var(--surface-2);color:var(--teal-light)}
.acct-menu-email{margin:0;padding:.5rem 1rem .6rem;color:var(--gray);font-size:.85rem;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.acct-wrap{max-width:760px}
.acct-h{text-transform:none;letter-spacing:.04em;font-size:clamp(1.9rem,5vw,2.8rem)}
.acct-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.25rem 1.1rem;margin:0 0 1.25rem}
.acct-card[hidden],.acct-in[hidden],.acct-tabs[hidden],.acct-form[hidden],.acct-demo-note[hidden]{display:none}
.acct-card h2{font-size:1.2rem;letter-spacing:.1em;margin-bottom:.8rem}
.acct-card h3{font-size:1rem;margin:1.4rem 0 .6rem}
.acct-form{display:grid;gap:.9rem}
.acct-form label{display:grid;gap:.35rem;font-weight:400}
.acct-form label[hidden]{display:none}
.acct-form input[type=email],.acct-form input[type=password]{width:100%;min-height:48px;padding:.7rem .85rem;background:var(--bg);color:var(--white);border:1px solid #666;border-radius:var(--r);font:inherit}
.acct-form input:focus{border-color:var(--teal-light)}
.acct-form .btn{justify-self:start}
.acct-form .status,.acct-card .status{margin:0;min-height:0}
.acct-form .status:empty,.acct-card .status:empty{display:none}
.status.err{color:#ff8a8a}
.acct-form p{margin:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.acct-pw summary{cursor:pointer;color:var(--teal-light);padding:.3rem 0}
.acct-pw[open]{display:grid;gap:.8rem}
.acct-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.linkish{background:none;border:0;padding:.5rem 0;color:var(--teal-light);font:inherit;text-decoration:underline;cursor:pointer}
.linkish:hover{color:var(--white)}
.acct-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;border-bottom:1px solid var(--line);margin:0 0 1.5rem}
.acct-tabs a{padding:.7rem 0;color:var(--text-2);text-decoration:none;font:400 .85rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid transparent}
.acct-tabs a[aria-current=page]{color:var(--white);border-color:var(--teal)}
.acct-tabs .linkish{margin-left:auto;font-size:.9rem}
.acct-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.5rem;margin:0 0 1.1rem}
.acct-dl dt{color:var(--gray)}.acct-dl dd{margin:0}
.acct-list{list-style:none;margin:0;padding:0}
.acct-list li{display:grid;gap:.2rem;padding:.7rem 0;border-top:1px solid var(--line)}
.acct-list li:first-child{border-top:0}
.dl-list{list-style:none;margin:0;padding:0}
.dl-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}
.dl-list li:first-child{border-top:0}
.ord-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:.2rem}
.ord-head h2{margin:0;font-size:1rem;letter-spacing:.08em}
.ord-head p{margin:0}
.ord-card .dl-list li:first-child{border-top:0}
.acct-wrap [hidden]{display:none!important}
@media (max-width:520px){.acct-tabs{gap:.25rem 1.1rem}.acct-tabs a{font-size:.76rem;letter-spacing:.08em}}
.dl-list li>div{display:grid;gap:.15rem;min-width:0}
.dl-list .btn{flex:none;min-height:42px;padding:.6rem 1.1rem}
.acct-inline{grid-template-columns:1fr auto;align-items:end}
.acct-inline .status{grid-column:1/-1}
@media (max-width:520px){.acct-inline{grid-template-columns:1fr}.dl-list li{flex-wrap:wrap}.acct-tabs .linkish{margin-left:0}}
.acct-demo-pick{border-top:1px dashed var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.acct-demo-pick p{margin:0}
.logo span{white-space:nowrap}
@media (max-width:480px){
  .site-header .bar{gap:.5rem}
  .acct-signin{border:0;padding:.5rem .35rem;font-size:.72rem;letter-spacing:.1em}
  .acct-avatar{width:34px;height:34px;font-size:.9rem}
  .acct + .nav-toggle,.site-header .bar>.nav-toggle{width:44px}
}
@media (max-width:380px){.logo{letter-spacing:.14em;font-size:.82rem}}
@media (max-width:359px){.site-header .bar:has(.acct:not([hidden])) .logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
/* Printful ship-to box (only shown with live shipping quotes) */
.ship-to{border:1px solid #4a4a4a;border-radius:var(--r);padding:.75rem 1rem 1rem;margin:1rem 0;min-width:0}
.ship-to legend{padding:0 .4rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.ship-to label{display:block;margin-top:.6rem}

/* Mobile open menu: centred link group (scroll-safe via margin:auto) */
@media (max-width:999px){
  .site-nav.open{display:flex;flex-direction:column}
  .site-nav.open ul{margin:auto 0;text-align:center;width:100%}
  .site-nav.open a{display:flex;align-items:center;justify-content:center;min-height:48px;padding-left:.5rem;padding-right:.5rem}
}
@media (max-width:999px) and (max-height:500px){ .site-nav.open a{min-height:44px} }

/* Mobile portfolio covers (<640px). Plain crops only, per-album focal points.
   Variant is chosen by a class on <nav class="ptiles ..."> set in tools/build.py (PTILE_COVERS):
   "covers-wide" = horizontal 3:2 (current), "covers-tall" = vertical 4:5 (previous). Revert = set PTILE_COVERS="covers-tall". */
@media (max-width:639px){
  /* vertical 4:5 */
  .ptiles.covers-tall .ptile img{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 25%}
  .ptiles.covers-tall .ptile[href$="/portraits"] img{object-position:50% 20%}
  .ptiles.covers-tall .ptile[href$="/travel"] img{object-position:50% 50%}
  .ptiles.covers-tall .ptile[href$="/fantasy"] img{object-position:61% 50%}
  .ptiles.covers-tall .ptile[href$="/products"] img{object-position:75% 50%}
  .ptiles.covers-tall .ptile[href$="/editoral"] img{object-position:50% 15%}
  .ptiles.covers-tall .ptile[href$="/boudoir"] img{object-position:50% 30%}
  .ptiles.covers-tall .ptile[href$="/wedding"] img{object-position:50% 50%}
  .ptiles.covers-tall .ptile[href$="/cosplay"] img{object-position:50% 15%}
  /* horizontal 3:2 */
  .ptiles.covers-wide .ptile img{aspect-ratio:3/2;height:auto;object-fit:cover;object-position:50% 50%}
  .ptiles.covers-wide .ptile[href$="/portraits"] img{object-position:50% 20%}
  .ptiles.covers-wide .ptile[href$="/travel"] img{object-position:50% 50%}
  .ptiles.covers-wide .ptile[href$="/fantasy"] img{object-position:55% 50%}
  .ptiles.covers-wide .ptile[href$="/products"] img{object-position:50% 50%}
  .ptiles.covers-wide .ptile[href$="/editoral"] img{object-position:50% 4%}
  .ptiles.covers-wide .ptile[href$="/boudoir"] img{object-position:50% 22%}
  .ptiles.covers-wide .ptile[href$="/wedding"] img{object-position:50% 50%}
  .ptiles.covers-wide .ptile[href$="/cosplay"] img{object-position:50% 18%}
}
/* (2026-10-31: removed a stray extra "}" that sat here and broke the next rule) */
/* About page (2026-10-31, was Contact): same tinted photo backdrop, shared header with the menu gradient kept at the top,
   then bio, "Past Clients" logo wall (tools/clients.json) and the unchanged contact form in #contact. */
.about-page .site-header::before{opacity:1}
.about-wrap{min-height:0}
/* Footer (2026-10-31): the fixed photo backdrop (.contact-bg inside the isolated .contact-stage) painted over the in-flow footer,
   so /about showed the photo where every other page shows the newsletter band and footer. Lift the footer above it; the footer
   markup, width, padding and colours are the shared .site-footer rules, unchanged. */
.about-page .site-footer{position:relative;z-index:1}
.about-intro{display:grid;grid-template-columns:215px minmax(0,1fr);gap:1.5rem 3rem;align-items:start;margin-top:1.5rem}
.about-intro .contact-portrait{margin:0}
.about-bio p{margin:0 0 1rem;max-width:62ch;line-height:1.7;color:var(--text-2,#d6d6d6)}
.about-links{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0}
.about-brands,.about-contact{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line,rgba(255,255,255,.15))}
.about-brands h2,.about-contact h2{margin:0 0 1.5rem}
.about-contact{scroll-margin-top:72px}
.about-contact .contact-cols{margin-top:0}
.brand-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.brand-wall li{margin:0;border-radius:var(--r,6px);overflow:hidden;aspect-ratio:3/2;background:#1a1a1a}
.brand-wall a,.brand-wall picture,.brand-wall img{display:block;width:100%;height:100%}
/* Muted wall restored (Martin 2026-11-01): every tile dark grey with a greyscale logo; full colour on hover / keyboard focus.
   The tile files are white with the colour logo, so invert(.9) turns white into dark grey (#1a1a1a) and dark logos light grey. */
.brand-wall img{object-fit:cover;filter:grayscale(1) invert(.9);transition:filter .3s}
.brand-wall li:hover img,.brand-wall a:focus-visible img{filter:none}
.brand-wall a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
@media (max-width:999px){.brand-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}  /* 18 logos: 3 rows of 6, or 6 rows of 3 */
@media (max-width:599px){
  .about-intro{grid-template-columns:1fr;justify-items:start}
  .about-intro .contact-portrait{width:183px}
  .brand-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .about-brands,.about-contact{margin-top:2.5rem;padding-top:2rem}
  .about-links .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.brand-wall img{transition:none}}

/* ===== Menu motion (2026-11-01, Martin): inspired by the Atomic Hype menu, toned down for mwp's minimal style.
   - Header: transparent over the photo; once .scrolled (js/site.js) a lightly blurred dark bar with a 1px hairline fades in (no heavy shadow).
   - Desktop links: 1px underline draws in from the left on hover / keyboard focus, stays under the current page.
   - Mobile: thin two-line burger morphs to an X; full-screen overlay fades in, links fade up one after another (~300ms, ease-out).
   - prefers-reduced-motion: the global rule near the top turns every transition off, so it all simply appears. ===== */
:root{--menu-ease:cubic-bezier(.22,.61,.36,1)}
.site-header::before{height:100%;background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(255,255,255,.09);transition:opacity .35s var(--menu-ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header::before{background:rgba(20,20,20,.94)}}
/* 2026-11-01, Martin: inner pages (not Home) at the very top: a soft see-through dark fade to clear behind the menu and title, no hairline, no blur bar.
   4:42 PM, Martin: keep the frosted blur glass, but fade it out softly at the bottom (mask), no hard edge, no grey line; same while scrolling. */
body:not(.home) .site-header::before,.home .site-header::before{height:calc(100% + 36px);border-bottom:0;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);background:linear-gradient(to bottom,rgba(20,20,20,.78) 0,rgba(20,20,20,.6) 55%,rgba(20,20,20,0) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%)}
.site-header{transition:transform .3s var(--menu-ease)}
/* 2026-11-01 banner jump fix (Martin: "still a jump on the background of the banner", while scrolling back up): the header used to fade
   (opacity .3s) as it slid back in. While an element's opacity is below 1 it becomes a "backdrop root", so the frosted ::before inside it
   can't blur the banner behind it: for the whole slide-in the photo/text showed through sharp, then the blur snapped on in the last frame.
   Now the header only slides (transform, which keeps the blur working), and it hides 40px further up so the 36px soft fade under
   the bar is out of view too. Never fade the header itself; fade only the ::before (its own opacity cross-fades correctly). */
.site-header.hdr-hidden{transform:translate3d(0,calc(-100% - 40px),0);opacity:1}
/* 2026-11-01 header jump fix (Martin: "the frosted glass has a jumping effect"):
   - Home now keeps the same fade-glass shape, height and mask at all times (above: ".home .site-header::before" instead of only
     ".scrolled"), so the only thing that changes when .scrolled toggles is opacity. Before, the glass snapped to a shorter, hard-edged
     bar with a grey hairline the moment .scrolled was removed, while it was still fading out, and grew 36px in one jump when added.
     Home is still clear at the very top (opacity 0 until .scrolled).
   - No header transitions until the page has painted and loaded (js/site.js adds html.hdr-ready two frames after load), so the bar
     and its glass are simply there from the first frame; a scroll-restored reload no longer fades or slides the header in. */
html:not(.hdr-ready) .site-header,html:not(.hdr-ready) .site-header::before{transition:none!important}
/* on the solid bar the text no longer needs the photo shadow */
.site-header.scrolled .site-nav a,.site-header.scrolled .logo{text-shadow:none}
.site-header.scrolled .logo img,.site-header.scrolled .nav-toggle .burger{filter:none}

/* hairline underline */
.site-nav a>span{position:relative;display:inline-block}
.site-nav a>span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .32s var(--menu-ease)}
.site-nav a:hover>span::after,.site-nav a:focus-visible>span::after,.site-nav a[aria-current=page]>span::after{transform:scaleX(1)}
.site-nav a{transition:color .25s var(--menu-ease)}
.site-nav a:hover{color:var(--white)}
.site-nav a[aria-current=page]{color:var(--teal-light)}
.site-nav a:focus-visible{outline-offset:6px}

/* thin two-line burger -> X */
.nav-toggle .burger{position:relative;display:block;width:24px;height:12px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.nav-toggle .burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--menu-ease)}
.nav-toggle .burger i:first-child{top:0}
.nav-toggle .burger i:last-child{bottom:0}
.nav-toggle[aria-expanded=true] .burger{filter:none}
.nav-toggle[aria-expanded=true] .burger i:first-child{transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .burger i:last-child{transform:translateY(-5.25px) rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){
  html.intro-go:not(.intro-done) .home .site-header .bar>.nav-toggle .burger{--fx:0px;--fy:-60px;animation:mw-float-in 500ms var(--mw-ease) var(--mw-hold) backwards}
}

/* mobile overlay: always laid out, hidden until .open so it can fade both ways */
@media (max-width:999px){
  .site-nav{display:flex;flex-direction:column;position:fixed;inset:0;height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:1;border-top:0;
    padding:calc(64px + env(safe-area-inset-top,0px) + .5rem) max(1.25rem,env(safe-area-inset-right,0px)) calc(1.25rem + env(safe-area-inset-bottom,0px)) max(1.25rem,env(safe-area-inset-left,0px));
    background:rgba(28,28,28,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--menu-ease),visibility 0s linear .28s}
  .site-nav.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--menu-ease),visibility 0s}
  .site-header:has(.site-nav.open),.home .site-header:has(.site-nav.open){background:transparent}
  .site-nav ul{margin:auto 0;text-align:center;width:100%}
  .site-nav a{display:flex;align-items:center;justify-content:center;min-height:56px;padding:.5rem;font-size:1rem;letter-spacing:.2em;text-shadow:none!important}
  .site-nav li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .2s var(--menu-ease),transform .2s var(--menu-ease)}
  .site-nav.open li{opacity:1;transform:none;transition:opacity .32s var(--menu-ease),transform .35s var(--menu-ease);transition-delay:calc(70ms + var(--i,0) * 45ms)}
  .site-nav li:nth-child(1){--i:0}.site-nav li:nth-child(2){--i:1}.site-nav li:nth-child(3){--i:2}.site-nav li:nth-child(4){--i:3}
  .site-nav li:nth-child(5){--i:4}.site-nav li:nth-child(6){--i:5}.site-nav li:nth-child(7){--i:6}.site-nav li:nth-child(8){--i:7}
  .site-nav a>span::after{bottom:-6px}
}
@media (max-width:999px) and (max-height:500px){
  .site-nav{padding-top:calc(56px + env(safe-area-inset-top,0px) + .25rem)}
  .site-nav a{min-height:44px;font-size:.85rem;letter-spacing:.12em}
}
/* 2026-11-01 first-load speed (Martin: "I see the things behind the banner first"): banner photos carry a tiny inline preview
   (tools/hero_images.py, a plain 48px resize of the same photo) as --lqip. It paints with the first frame, behind the img,
   so the dark page never shows through; the full photo covers it as soon as it arrives. Same crop position as the img. */
img[style*="--lqip"]{background:var(--lqip) 50% 50%/cover no-repeat}
.hero .hero-media img[style*="--lqip"]{background-position:53% 40%}
/* Sign-in link sent: light teal box with a mail icon so it can't be missed (login, forgot password, signup) */
.status.sent,.acct-form .status.sent,.acct-card .status.sent{display:block;margin:.9rem 0 .25rem;padding:.85rem 1rem .85rem 3rem;background:#e3f6f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") no-repeat 1rem center/1.35rem;border:1px solid #1fb5b5;border-left:5px solid #1fb5b5;border-radius:6px;color:#0b3a3a;font-weight:600;line-height:1.45;font-size:1rem}
@media (max-width:480px){.status.sent,.acct-form .status.sent,.acct-card .status.sent{font-size:.95rem;padding:.8rem .85rem .8rem 2.7rem;background-position:.8rem center}}
/* 2026-11-01 menu jump fix, part 2: Chrome/Edge keep the old page on screen until the new one is ready to paint (same-site links),
   instead of flashing a blank dark frame in between. No cross-fade: the swap is instant, so the header never moves or fades. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
/* 2026-11-01 declutter (Martin: "the top bar looks a little crowded"): desktop header row is 100px wider (1080px instead of 980px of
   content) so the logo and the menu get clear air between them; the menu stays centred between the logo and the reserved 88px
   account slot, so the 0px menu-jump fix is unchanged. "Presets & LUTs" is just "Presets" in the menu (tools/build.py NAV). */
@media (min-width:1000px){.site-header .wrap,.home .site-header .wrap{max-width:calc(1080px + 2.5rem)}}
/* SEO/AEO pass (Nov 2, 2026): short answer-first intro on Home, above the free guide strip */
.home-answer{position:relative;z-index:1;background:#111;max-width:none;padding:3.5rem max(1.25rem,calc((100% - 980px)/2)) 3rem}
.home-answer h2{margin:0 0 1rem;font-weight:300}
.home-answer p{max-width:68ch;line-height:1.7;margin:0 0 1.25rem}
.home-answer p:last-child{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
/* "Create an account" opt-in on buy boxes (2026-11-02, checked by default) */
.acct-optin{flex-basis:100%;margin:.6rem 0 .75rem;font-size:.95rem;line-height:1.45;color:var(--text-2)}
.acct-optin label{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;margin:0;font-weight:400;text-transform:none;letter-spacing:0}
.acct-optin input{width:1.15rem;height:1.15rem;accent-color:var(--teal);flex:0 0 auto;margin:.15rem 0 0}
.acct-optin strong{color:var(--text)}
.acct-optin p{margin:0}
.thanks-acct{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;margin:2rem auto 0;max-width:36rem;text-align:center}
.thanks-acct h2{margin-top:0;font-size:clamp(1.15rem,2.4vw,1.4rem)}

/* 2026-11-02-refunds: Past purchases refund badge */
.ord-badge{display:inline-block;margin-top:.35rem;padding:.15rem .6rem;border:1px solid #d77;border-radius:999px;color:#f3b3b3;font-size:.8rem;letter-spacing:.04em}
.ord-badge.part{border-color:#c9a55a;color:#ecd39a}

/* 2026-11-02-owned: "You Own This" / "You're a Member". html.own-wait (head script) hides Buy for <=800ms only for browsers
   that were signed in last visit, so Buy never flashes away; visibility keeps the layout from jumping. */
html.own-wait form.js-buy[data-type="digital"] button[type="submit"],html.own-wait .js-bundle-buy[data-kind="digital"],html.own-wait a[data-checkout]{visibility:hidden}
.owned-box{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;border-left:3px solid var(--teal);background:var(--surface);padding:.9rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:1rem 0}
.owned-box .owned-note{margin:0;flex:1 1 14rem}
.owned-box .owned-note strong{display:block;font:500 .85rem/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);margin-bottom:.2rem}
.own-part{color:var(--teal-light);margin:.5rem 0}
.tile .own-badge{position:absolute;top:.6rem;left:.6rem;background:rgba(0,0,0,.65);z-index:1}
.own-before{margin:.2rem 0 0}
/* 2026-11-02-owned: .btn sets display, so make [hidden] win for the Buy/Join buttons we hide for owners */
form.js-buy [hidden],.js-bundle-buy[hidden],a[data-checkout][hidden],.bundle-card [hidden]{display:none!important}
/* 2026-11-02-bts: monthly preset photos keep their full frame (no cover cropping). The box takes the photo's own
   shape via --ar (aspect field or measured on load); desktop caps the height and centers it, mobile is full width. */
.ba{aspect-ratio:var(--ar,3/2)}
.ba .layer img{object-fit:contain}
.locked-media{aspect-ratio:var(--ar,3/2)}
.locked-media img{object-fit:contain}
.pm-media{display:grid;gap:1rem;justify-items:center;margin-top:.25rem}
.pm-media>*{width:100%}
.fit{margin-inline:auto;width:100%}
@media (min-width:700px){.fit{max-width:min(100%,calc(min(72vh,620px) * var(--arn,1.5)))}}
.preset-card.mini .locked-media{max-width:none}
/* behind-the-scenes loop: same no-crop rule, smaller than the photo */
.bts{margin:0 auto;width:min(100%,280px)}
@media (min-width:700px){.bts{width:min(100%,calc(min(56vh,420px) * var(--arn,.5639)))}}
.bts-media{position:relative;aspect-ratio:var(--ar,406/720);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.bts video{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface-2)} /* 2026-11-02 review: box is the clip's own 406x720 (9:16) shape; cover so a decoder's 406x722 never leaves a black sliver */
.bts-tag{position:absolute;left:.6rem;top:.6rem;padding:.2rem .5rem;background:rgba(0,0,0,.65);color:var(--white);font:400 .68rem var(--head);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.bts.bts-sm{width:140px;margin:.6rem 0 0}
.bts.bts-sm .bts-tag{font-size:.58rem;left:.4rem;top:.4rem;padding:.15rem .35rem}
/* 2026-11-02-pastmonths: Past Months gets full section spacing; roomier archive cards; placeholder slots are a plain tile */
.past-months{margin-top:3.5rem;padding-top:3rem;border-top:1px solid var(--line)}
.past-months>h2{margin:0 0 .6rem}
.past-months>p.muted{margin:0 0 1.75rem;max-width:72ch}
.past-compare{margin-top:2.25rem}
#monthly-archive{gap:1.5rem}
.archive li.past-month{padding:1.25rem 1.25rem 1.5rem}
.archive li.past-month h3{margin:0 0 1rem}
.archive li.past-month .pair{gap:1rem}
.archive li.past-month .unlock{margin-top:1.25rem}
.preset-card.mini{gap:1rem;padding:.85rem;align-items:center}
.preset-card.mini .mini-text{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.preset-card.mini .badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.preset-card.mini h4{margin:0;line-height:1.3}
.locked-media .slot.empty{background:linear-gradient(135deg,#2a2a2a,#1c1c1c);border:0;font-size:0;color:transparent}
@media (max-width:420px){.preset-card.mini{grid-template-columns:96px 1fr;gap:.85rem}.past-months{margin-top:2.5rem;padding-top:2.25rem}}
/* 2026-11-02-pastreal: video links + /membership/ This Month's Presets showcase */
.video-link{margin:.6rem 0 0}
.video-link a{display:inline-flex;align-items:center;gap:.4rem;color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
.video-link a svg{flex:none}
.preset-card.mini .video-link{margin:0}
.tm-show{margin:2.25rem 0 3rem;padding:1.75rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2,rgba(255,255,255,.03))}
.tm-show>h2{margin:0 0 .5rem}
.tm-lead{margin:0 0 1.5rem;max-width:75ch}
.tm-pair{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:start}
.tm-card{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.tm-card h3{margin:0}
.tm-card>p{margin:0}
.tm-card .badges{display:flex;flex-wrap:wrap;gap:.4rem}
.tm-card .badge.lock{display:inline-flex;align-items:center;gap:.3rem}
.tm-media{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:center}
.tm-media>.ba-wrap{flex:1 1 220px;min-width:0;margin:0}
.tm-media>.tm-bts{flex:0 0 120px;width:120px;margin:0}
.tm-cta{margin-top:.25rem}
.tm-cta .btn{display:inline-flex;align-items:center;gap:.45rem}
.tm-cta p{margin:.45rem 0 0}
@media (max-width:520px){.tm-show{padding:1.1rem;margin:1.5rem 0 2.25rem}.tm-media>.tm-bts{flex-basis:100px;width:100px}}
/* 2026-11-02-pspsamples: Portrait Smart Preset Vol 1 free samples on /presets/free-monthly/ */
.psp-samples{margin:3rem 0 0}
.psp-samples>h2{margin-bottom:.4rem}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}
.sample-card{display:flex;flex-direction:column}
.sample-card .ba-wrap{margin:auto 0 0;padding-top:.75rem}
.sample-card .sample-how{margin:.9rem 0 0}
.sample-card .gate.in-card{margin-top:.5rem}
.psp-full{display:grid;grid-template-columns:180px 1fr;gap:1.25rem;align-items:center;margin-top:1.5rem;padding:1.25rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.psp-full img{width:100%;height:auto;border-radius:calc(var(--r) - 4px);display:block}
.psp-full h3{margin:0 0 .4rem}
@media (max-width:960px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sample-grid{grid-template-columns:minmax(0,1fr)}.psp-full{grid-template-columns:110px 1fr;gap:.9rem;padding:1rem}}
/* 2026-11-02-planaware: signed-in lock states */
.badge.incl{border-color:var(--teal);color:var(--teal-light)}
.preset-card.is-included .locked-media::after,.preset-card.is-included .lock-badge{display:none}
.preset-card.mini .mini-dl{align-self:flex-start;padding:.55rem 1rem;font-size:.8rem}
.gate-owned{margin:1rem 0 0}
.plan.is-member .member-box{margin:auto 0 0}
form.js-gate[data-owned],[data-owned-hide]{display:none!important}
/* 2026-11-02 (Martin): preset month pages, /presets/YYYY-MM/ (tools/monthly_pages.py, js/monthly-detail.js) */
.pmo-top{margin:1.25rem 0 2rem}
.pmo-top p{max-width:72ch}
.pmo-top h1{margin:.2rem 0 .6rem;text-transform:none;letter-spacing:.04em}
.pmo-month{margin:0;font:400 .9rem/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-light)}
.pmo-intro{font-size:1.1rem;margin:0 0 .5rem}
.pmo-jump a,.pmo-more a,.pmo-video figcaption a,.pmo-full{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
.pmo-preset{padding:2.5rem 0;border-top:1px solid var(--line);scroll-margin-top:5rem}
.pmo-head .badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.pmo-head .badges:empty{display:none}
.pmo-head h2{margin:0 0 1.25rem;text-transform:none;letter-spacing:.04em}
.pmo-grid{display:grid;gap:1.75rem;align-items:start}
@media (min-width:960px){.pmo-grid{grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:2.5rem}}
.pmo-main .fit{width:100%;margin:0 auto}
@media (min-width:700px){.pmo-main .fit{max-width:min(100%,calc(min(82vh,900px) * var(--arn,1.5)))}}
.pmo-lede{font-size:1.08rem;margin-top:0}
.pmo-access{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;margin-top:1.25rem}
.pmo-access .owned-box{margin:0}
.pmo-access-note{margin:0 0 1rem}
.pmo-access .gate.in-card{margin:0;padding:0;background:none;border:0}
.pmo-extras{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;align-items:flex-start}
.pmo-extras:empty{display:none}
.pmo-extras .bts{width:min(100%,280px);margin:0}
.pmo-video{margin:0;flex:1 1 360px;max-width:720px;min-width:0}
.pmo-video.is-short{flex:0 1 280px;max-width:280px}
.pmo-video.is-short .yt{aspect-ratio:9/16}
.pmo-video figcaption{margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.pmo-ig{flex:1 1 260px;margin:0;align-self:center}
.pmo-ig-link{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--white);text-decoration:none;max-width:420px}
.pmo-ig-link:hover,.pmo-ig-link:focus-visible{border-color:var(--teal)}
.pmo-ig-link>span{display:flex;flex-direction:column;gap:.15rem}
.pmo-ig-link strong{font:500 1.05rem var(--head);letter-spacing:.06em}
.pmo-more{padding-top:2.5rem;border-top:1px solid var(--line)}
.pmo-months{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.pmo-months a{display:inline-block;padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--white)}
.pmo-months a:hover,.pmo-months a:focus-visible{border-color:var(--teal);color:var(--teal-light)}
.pm-month-link{margin:-.5rem 0 1rem}
.pm-month-link a,.past-month h3 a{color:var(--teal-light)}
.past-month h3 a{text-decoration:none}
.past-month h3 a:hover,.past-month h3 a:focus-visible{text-decoration:underline}
/* Past Months cards on /presets/free-monthly/ link to these pages */
.preset-card.mini .pm-thumb-link{display:block;border-radius:var(--r)}
.preset-card.mini h4 a{color:inherit;text-decoration:none}
.preset-card.mini h4 a:hover,.preset-card.mini h4 a:focus-visible{color:var(--teal-light);text-decoration:underline}
.preset-card.mini .pm-see{margin:0}
.preset-card.mini .pm-see a{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
/* 2026-11-02 (Martin): My Downloads, Preset of the Month grouped by month (js/account.js monthGroups) */
.dlm-note{margin:-.25rem 0 1rem}
.dlm{border-top:1px solid var(--line)}
.dlm:first-child{border-top:0}
.dlm-h{margin:0;font-size:inherit}
.dlm-btn{display:flex;align-items:center;gap:.75rem;width:100%;min-height:52px;padding:.8rem .25rem;background:none;border:0;color:var(--white);text-align:left;cursor:pointer;font:inherit}
.dlm-btn:hover .dlm-title,.dlm-btn:focus-visible .dlm-title{color:var(--teal-light)}
.dlm-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dlm-title{flex:1 1 auto;font:500 1.05rem/1.3 var(--head);letter-spacing:.06em;min-width:0}
.dlm-now{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border:1px solid var(--teal);border-radius:var(--r);font:400 .7rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);vertical-align:middle}
.dlm-count{flex:none;text-align:right}
.dlm-chev{flex:none;transition:transform .2s}
.dlm.open .dlm-chev{transform:rotate(180deg)}
.dlm-panel{padding:0 0 1rem}
.dlm-items{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.dlm-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.dlm-thumb{flex:none;width:64px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.dlm-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dlm-item.is-locked .dlm-thumb img{opacity:.55}
.dlm-text{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;min-width:0}
.dlm-text strong{font:500 1rem/1.3 var(--head);letter-spacing:.04em}
.dlm-item .btn{flex:none;min-height:42px;padding:.6rem 1.1rem}
.dlm-see{margin:.75rem 0 0}
.dlm-see a{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.dlm-count{display:none}.dlm-item{flex-wrap:wrap}.dlm-item .btn{width:100%;text-align:center}}