/* pedrothomaz.pt — extras shared by every page: product cards on hover, command palette, page transitions,
   project accents, phone header, ghost comments stepping aside, live status in the footer, contact shortcuts.
   Inlined on the homepage, linked on the other pages (build.mjs). The phone card images are appended at build. */
@view-transition{navigation:auto}

/* ───────── product visuals in Projects ───────── */
/* desktop: one framed print that follows the pointer (or sits by the focused card); never changes the layout */
.px-peek{position:fixed;left:0;top:0;z-index:70;width:340px;margin:0;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0);transition:opacity .22s ease;will-change:transform,opacity}
.px-peek.on{opacity:1}
.px-peek .px-frame{display:block;border:1.5px solid #111;background:#fff;box-shadow:8px 8px 0 #C8321A}
.px-peek img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:#F4F2EE}
.px-peek figcaption{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-top:1.5px solid #111;background:#fff;color:#111;font:13px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}
.px-peek figcaption b{font-weight:700}.px-peek figcaption span{color:#5E5E5E}
html[data-tod=night] .px-peek .px-frame{border-color:#EDEBE6;box-shadow:8px 8px 0 #E5492E}
html[data-tod=night] .px-peek figcaption{background:#0E0E0F;color:#EDEBE6;border-top-color:#EDEBE6}
html[data-tod=night] .px-peek figcaption span{color:#ADAAA3}
@media (prefers-reduced-motion:reduce){.px-peek{transition:none}}
/* phones / touch: the same image, small, inside the card (rules with the image urls are generated in proto.js) */

/* ───────── command palette ───────── */
.px-pal{width:min(640px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 96px));margin:12vh auto auto;padding:0;border:1px solid #111;border-radius:14px;background:#FBFAF6;color:#111;box-shadow:10px 10px 0 #111;overflow:hidden;font:14px/1.5 'JetBrains Mono',ui-monospace,monospace}
.px-pal[open]{display:flex;flex-direction:column;animation:pxPal .18s cubic-bezier(.16,1,.3,1)}
@keyframes pxPal{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.px-pal::backdrop{background:rgba(17,17,17,.38);backdrop-filter:blur(2px)}
.px-pal-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid #111;font-size:13px;color:#5E5E5E}
.px-pal-bar i{width:11px;height:11px;border-radius:50%;border:1px solid #111;display:block}.px-pal-bar i:first-child{background:#C8321A;border-color:#C8321A}
.px-pal-bar span{margin-left:8px}
.px-pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.px-pal-in b{color:#C8321A;font-weight:700;white-space:nowrap}
.px-pal-in input{flex:1;min-width:0;border:0;outline:0;background:none;color:inherit;font:inherit;font-size:16px;padding:4px 0}
.px-pal-in input::placeholder{color:#8A8780}
.px-pal-list{list-style:none;margin:0;padding:4px 8px 8px;overflow:auto;flex:1}
.px-pal-list li{display:flex;align-items:baseline;gap:12px;padding:9px 10px;border-radius:6px;cursor:pointer;scroll-margin:8px}
.px-pal-list li[aria-selected=true]{background:#111;color:#FBFAF6}
.px-pal-list .k{flex:none;width:76px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#C8321A}
.px-pal-list li[aria-selected=true] .k{color:#FF8A73}
.px-pal-list .t{flex:1;min-width:0;font-family:'Inter Tight',system-ui,sans-serif;font-size:16px;font-weight:600}
.px-pal-list .h{flex:none;font-size:13px;color:#8A8780;white-space:nowrap}
.px-pal-list li[aria-selected=true] .h{color:#C9C6BF}
.px-pal-list .none{cursor:default;color:#5E5E5E;font-size:14px}
.px-pal-foot{display:flex;gap:18px;flex-wrap:wrap;padding:9px 16px;border-top:1px solid #DDD;font-size:13px;color:#5E5E5E}
.px-pal-foot kbd{font:inherit;border:1px solid currentColor;border-radius:4px;padding:0 5px;margin-right:4px}
html[data-tod=night] .px-pal{background:#141415;color:#EDEBE6;border-color:#EDEBE6;box-shadow:10px 10px 0 #EDEBE6}
html[data-tod=night] .px-pal-bar{border-bottom-color:#EDEBE6;color:#ADAAA3}html[data-tod=night] .px-pal-bar i{border-color:#EDEBE6}html[data-tod=night] .px-pal-bar i:first-child{background:#E5492E;border-color:#E5492E}
html[data-tod=night] .px-pal-in b,html[data-tod=night] .px-pal-list .k{color:#E5492E}
html[data-tod=night] .px-pal-list li[aria-selected=true]{background:#EDEBE6;color:#0E0E0F}
html[data-tod=night] .px-pal-list li[aria-selected=true] .k{color:#A82814}html[data-tod=night] .px-pal-list li[aria-selected=true] .h{color:#444}
html[data-tod=night] .px-pal-foot{border-top-color:#2B2B2D;color:#ADAAA3}
html[data-tod=night] .px-pal::backdrop{background:rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.px-pal[open]{animation:none}}
@media (max-width:640px){.px-pal{margin-top:8vh}.px-pal-list .h{display:none}.px-pal-list .k{width:64px}}
/* the hint in the header: desktop only */
.px-k{font:inherit;letter-spacing:inherit;text-transform:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:1px solid currentColor;border-radius:6px;background:none;color:var(--muted,#5E5E5E);cursor:pointer;font-size:13px;font-family:'JetBrains Mono',ui-monospace,monospace;transition:color .2s,background .2s}
.px-k:hover,.px-k:focus-visible{color:var(--paper,#fff);background:var(--ink,#111);border-color:var(--ink,#111);outline:none}
@media (max-width:900px),(hover:none){.px-k{display:none}}

/* ───────── page transitions ───────── */
header .brand{view-transition-name:px-brand}
main .hero h1{view-transition-name:px-title}
.px-vt{view-transition-name:px-title}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
::view-transition-old(px-title),::view-transition-new(px-title){height:100%;width:auto;object-fit:contain;object-position:left center}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ───────── project pages: hero visual + one accent per project ───────── */
.px-proj{--acc:var(--acc0,#C8321A)}
html[data-tod=night].px-proj{--acc:color-mix(in srgb,var(--acc0,#C8321A) 58%,#fff)}
.px-proj .kick{color:var(--acc)}
.px-fig{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:32px;align-items:end;margin:0 10px 56px 0}
.px-fig .px-frame{display:block;border:1.5px solid var(--ink,#111);box-shadow:10px 10px 0 var(--acc,#C8321A);background:#F4F2EE;line-height:0}
.px-fig img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.px-fig figcaption{font:13px/1.6 'JetBrains Mono',ui-monospace,monospace;color:var(--muted,#5E5E5E);padding-bottom:4px}
.px-fig figcaption b{display:block;color:var(--ink,#111);text-transform:uppercase;letter-spacing:.08em}
.px-fig figcaption a{color:var(--ink,#111);text-underline-offset:3px}
.px-proj .px-fig{view-transition-name:px-fig}
@media (max-width:900px){.px-fig{grid-template-columns:1fr;gap:16px;margin-bottom:40px}}

/* ───────── phone header in one row ───────── */
@media (max-width:640px){
#app header.fade{gap:0 12px!important;padding:12px 0 0!important;flex-wrap:wrap!important;border-bottom-width:1px}
#app header.fade .brand{gap:10px}
#app header.fade .clk{padding:6px 0}
#app header.fade .clk-tod{display:none}
#app header.fade nav{flex:0 0 100%;min-width:0;flex-wrap:nowrap!important;gap:0 22px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:36px;box-sizing:border-box;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
#app header.fade nav::-webkit-scrollbar{display:none}
#app header.fade nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
}

/* ───────── ghost comments step aside ───────── */
.gh-card{transition:opacity .45s,transform .3s,translate .35s cubic-bezier(.2,.8,.2,1)}
.gh-c.px-rest .gh-card{opacity:0;transform:translateX(-6px) scale(.96);pointer-events:none}
.gh-c.px-rest:hover .gh-card,.gh-c.px-rest:focus-within .gh-card{opacity:1;transform:none;pointer-events:auto}
.gh-c.px-rest .gh-pin{opacity:.75;transition:opacity .3s}.gh-c.px-rest:hover .gh-pin{opacity:1}

/* ───────── live status dot ───────── */
.px-st{display:inline-flex;align-items:center;gap:8px;color:var(--muted,#5E5E5E);text-decoration:none;font:13px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
.px-st:hover,.px-st:focus-visible{color:var(--ink,#111)}
.px-st i{flex:none;width:8px;height:8px;border-radius:50%;background:#1F9D55;box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:pxPulse 2s infinite}
.px-st.bad{color:#C8321A}.px-st.bad i{background:#C8321A;animation:none}
html[data-tod=night] .px-st.bad{color:#E5492E}
@keyframes pxPulse{70%{box-shadow:0 0 0 7px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
@media (prefers-reduced-motion:reduce){.px-st i{animation:none}}
.px-st.px-st-foot{display:inline-flex;vertical-align:baseline;text-transform:none;letter-spacing:0;color:inherit!important;text-decoration:underline;text-underline-offset:3px}
.px-st.px-st-foot.bad{color:#C8321A!important}

/* ───────── contact: copy + contact card, on the same baseline as the other links in the row ───────── */
.foot-alt button{font:inherit;color:var(--ink,#111);background:none;border:0;margin:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;line-height:inherit}
.foot-alt button:hover,.foot-alt button:focus-visible{color:#C8321A}
html[data-tod=night] .foot-alt button:hover,html[data-tod=night] .foot-alt button:focus-visible{color:#E5492E}
.foot-alt button[data-ok]{text-decoration:none;color:#1F9D55}
@media (max-width:760px),(hover:none){
#projects a.biz[href="/amplified-creations/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/amplified-creations.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/amplified-creations/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/amplified-creations.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/amplified-creations/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/amplified-creations.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/coffee/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/coffee.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/coffee/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/coffee.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/coffee/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/coffee.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/delicious-diamonds/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/delicious-diamonds.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/delicious-diamonds/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/delicious-diamonds.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/delicious-diamonds/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/delicious-diamonds.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/lateapex/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/lateapex.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/lateapex/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/lateapex.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/lateapex/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/lateapex.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="https://photo.pedrothomaz.pt"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/photo.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="https://photo.pedrothomaz.pt"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/photo.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="https://photo.pedrothomaz.pt"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/photo.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/rver/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/rver.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/rver/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/rver.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/rver/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/rver.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/sill/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/sill.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/sill/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/sill.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/sill/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/sill.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/vitra/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vitra.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/vitra/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vitra.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/vitra/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vitra.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
#projects a.biz[href="/vrbox/"]::before{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vrbox.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;order:-1;margin-bottom:6px}
#projects .cl-row:not(.cl-main):has(a[href="/vrbox/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vrbox.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;max-width:420px;margin-top:6px}
#projects .cl-main:has(a[href="/vrbox/"])::after{content:"";display:block;width:100%;aspect-ratio:1200/630;background:#F4F2EE url("/assets/img/cards/vrbox.jpg?v=mwc3cxhs") center/cover no-repeat;border:1.5px solid var(--ink,#111);box-sizing:border-box;border-color:var(--on-ink,#fff);margin-top:22px;max-width:420px}
}
/* A1 · Sunset you can watch: the whole page cross-dissolves between day, dusk and night (see a1.js). */
/* the dissolve itself: old page fades out, new page fades in, over --a1-dur (3s on a click, 2 minutes at a real boundary) */
html.px-a1.a1-run::view-transition-old(root),
html.px-a1.a1-run::view-transition-new(root){animation-duration:var(--a1-dur,3s);animation-timing-function:cubic-bezier(.7,0,.3,1)}   /* lingers at both ends, moves through the grey middle quickly */
/* the page stays usable while it runs */
html.px-a1.a1-run::view-transition{pointer-events:none}
/* the brand normally has its own (fast) page-transition group: during a sunset it dissolves with the rest of the page */
html.px-a1.a1-run header .brand{view-transition-name:none}
/* the clock keeps ticking live instead of ghosting its old digits, and glows red while the light changes (readable on paper and on black) */
html.px-a1.a1-run #app .clk{view-transition-name:a1-clk;color:#C8321A}
html.px-a1 #app .clk{transition:color .8s ease}
html.px-a1.a1-run::view-transition-group(a1-clk){animation:none}
html.px-a1.a1-run::view-transition-old(a1-clk){display:none}
html.px-a1.a1-run::view-transition-new(a1-clk){animation:none}

/* a2 · the headline lands like one press impression: THOMAZ comes down slightly large and faint, and lands full.
   Ends exactly where the old intro ended: transform none, opacity 1. */
html.px-a2 .mast:not(.mast-ghost) .mast-big .mask{overflow:visible}
html.px-a2 .mast:not(.mast-ghost) .mast-big .rise{transform:none;opacity:0;filter:none;will-change:transform,opacity,clip-path}
html.px-a2 .mast-big .mask:nth-child(1) .rise{--a2-i:0}
html.px-a2 .mast-big .mask:nth-child(2) .rise{--a2-i:1}
html.px-a2 .mast-big .mask:nth-child(3) .rise{--a2-i:2}
html.px-a2 .mast-big .mask:nth-child(4) .rise{--a2-i:3}
html.px-a2 .mast-big .mask:nth-child(5) .rise{--a2-i:4}
html.px-a2 .mast-big .mask:nth-child(6) .rise{--a2-i:5}

html.px-a2 .mast:not(.mast-ghost) .mast-big .rise{transform-origin:50% 100%}
html.px-a2 .go .mast:not(.mast-ghost) .mast-big .rise{animation:a2-press .6s cubic-bezier(.45,0,.15,1) both!important;animation-delay:.5s!important}
@keyframes a2-press{
0%{opacity:0;transform:scale(1.04)}
100%{opacity:1;transform:none}
}

/* night: the see-through copy of THOMAZ over the portrait waits until the type is set */
html.px-a2 .go .mast-ghost{animation:a2-ghost .3s ease 1.5s both}
@keyframes a2-ghost{from{opacity:0}to{opacity:1}}
/* reduced motion (system setting, or the site's own BIOS switch): the headline is simply there */
@media (prefers-reduced-motion: reduce){
html.px-a2 .mast:not(.mast-ghost) .mast-big .rise,html.px-a2 .go .mast:not(.mast-ghost) .mast-big .rise{animation:none!important;opacity:1;transform:none;clip-path:none;filter:none}
html.px-a2 .go .mast-ghost{animation:none}
}
html.px-a2.pt-reduce .mast:not(.mast-ghost) .mast-big .rise,html.px-a2.pt-reduce .go .mast:not(.mast-ghost) .mast-big .rise{animation:none!important;opacity:1;transform:none;clip-path:none;filter:none}
html.px-a2.pt-reduce .go .mast-ghost{animation:none}


/* A3 · the career graph draws itself as a real git log. Everything is scoped under html.px-a3. */
html.px-a3{--a3-red:#C8321A;--a3-ok:#1F7A3F}
html.px-a3[data-tod=night]{--a3-red:#E5492E;--a3-ok:#5FD08A}

/* desktop graph: commits pop in where the cursor reaches them, labels fade in with their branch */
html.px-a3 #career .cg-c{transform-box:fill-box;transform-origin:center;transition:opacity .18s ease,transform .32s cubic-bezier(.2,1.6,.4,1)}
html.px-a3 #career .cg-lbl{transition:opacity .3s ease}
html.px-a3 #career .a3-hash{font:15px 'JetBrains Mono',ui-monospace,monospace;fill:var(--muted,#5E5E5E);paint-order:stroke;stroke:var(--paper,#fff);stroke-width:5px;stroke-linejoin:round;pointer-events:none;letter-spacing:.02em}
html.px-a3 #career .a3-hash.head{fill:var(--a3-red);font-weight:700}
html.px-a3 #career .a3-hash[data-here="1"]{fill:var(--ink,#111);font-weight:700}
html.px-a3[data-tod=night] #career .a3-hash{stroke:#0E0E0F}
html.px-a3[data-tod=dusk] #career .a3-hash{stroke:#FCF1E4}

/* the checkout line under the graph */
html.px-a3 #career .a3-co{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#DDD);font:13px/1.6 'JetBrains Mono',ui-monospace,monospace;color:var(--muted,#5E5E5E)}
html.px-a3 #career .a3-co:not([data-on])::before{content:'click a commit to check it out: the graph rewinds and the intro at the top changes with it'}
html.px-a3 #career .a3-co:not([data-on]) .a3-line,html.px-a3 #career .a3-co:not([data-on]) .a3-acts{display:none}
html.px-a3 #career .a3-line{margin:0;flex:1 1 420px;min-width:0;font-size:14px;color:var(--ink,#111)}
html.px-a3 #career .a3-head{display:inline-block;margin-right:12px;padding:1px 8px;background:var(--a3-red);color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
html.px-a3 #career .a3-acts{display:inline-flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
html.px-a3 .a3-main{font:700 13px 'JetBrains Mono',ui-monospace,monospace;color:var(--ink,#111);background:none;border:1px solid var(--ink,#111);padding:0 12px;min-height:32px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
html.px-a3 .a3-main:hover,html.px-a3 .a3-main:focus-visible{background:var(--ink,#111);color:var(--paper,#fff);outline:none}
html.px-a3 #career .a3-up{color:var(--muted,#5E5E5E);text-underline-offset:3px;white-space:nowrap}
html.px-a3 #career .a3-up:hover{color:var(--a3-red)}

/* the hero intro while a commit is checked out: the app's own sentence is hidden, ours stands in */
html.px-a3 .intro[data-a3] > p.fade{display:none}
html.px-a3 .intro > .a3-intro{display:none}
html.px-a3 .intro[data-a3] > .a3-intro{display:block;margin:0;max-width:420px;font-size:17px;line-height:1.45;color:var(--body,#333);animation:a3In .45s cubic-bezier(.16,1,.3,1)}
html.px-a3 .a3-intro .a3-tag{display:block;width:max-content;max-width:100%;margin-bottom:8px;padding:1px 8px;background:var(--a3-red);color:#fff;font:700 13px/1.6 'JetBrains Mono',ui-monospace,monospace}
html.px-a3 .a3-intro .a3-main{display:block;margin-top:10px}
@keyframes a3In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* phones: the log rows land in order (dot pops, hash types), newer rows dim while a commit is checked out */
@media (max-width:640px){
html.px-a3 #career .cg-mlog li{opacity:calc(.15 + .85 * var(--a3p,1));transform:translateX(calc((1 - var(--a3p,1)) * -14px));cursor:pointer;transition:opacity .25s}
html.px-a3 #career .cg-mlog li i{transform:scale(calc(.3 + .7 * var(--a3p,1)))}
html.px-a3 #career .cg-mlog li b{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
html.px-a3 #career .cg-mlog li[data-a3=future]{opacity:.28}
html.px-a3 #career .cg-mlog li[data-a3=here] .cg-ml-msg{font-weight:700}
html.px-a3 #career .cg-mlog li[data-a3=here] i{background:var(--ink,#111);border-color:var(--ink,#111)}
html.px-a3 #career .a3-co:not([data-on])::before{content:'tap a commit to check it out'}
/* the checkout line sits above the list; checked out, it sticks to the top of the screen while you read the log */
html.px-a3 #career .cg{display:flex;flex-direction:column}
html.px-a3 #career .a3-co{order:-1;margin:0 0 14px;padding:0 0 10px;border-top:0;border-bottom:1px dashed var(--line,#DDD)}
html.px-a3 #career .a3-co[data-on]{position:sticky;top:8px;z-index:5;margin:0 -8px 14px;padding:10px 12px;border:1.5px solid var(--ink,#111);background:var(--paper,#fff);box-shadow:5px 5px 0 var(--a3-red)}
html.px-a3 #career .a3-line{flex-basis:100%}
html.px-a3 #career .a3-head{display:block;width:max-content;margin:0 0 4px}
}
@media (prefers-reduced-motion:reduce){
html.px-a3 #career .cg-c,html.px-a3 #career .cg-lbl,html.px-a3 #career .cg-mlog li{transition:none}
html.px-a3 .intro[data-a3] > .a3-intro{animation:none}
}

/* A4 · Contact sheet for Media */
html.px-a4 .a4-toggle{margin:18px 0 10px 22px;background:none;border:0;padding:8px 0;cursor:pointer;font:13px 'JetBrains Mono',monospace;color:var(--ink,#111);text-decoration:underline;text-underline-offset:3px}
html.px-a4 .a4-toggle:hover,html.px-a4 .a4-toggle:focus-visible{color:#C8321A}
html.px-a4 .a4-sheet{margin:6px 0 26px;padding:18px 18px 14px;background:#F4F2EE;border:1.5px solid var(--ink,#111);color:#111}
html.px-a4 .a4-sheet[hidden]{display:none}
html.px-a4 .a4-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-bottom:14px;font:700 13px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#5E5E5E}
html.px-a4 .a4-foot{margin:14px 0 0;font:13px 'JetBrains Mono',monospace;color:#5E5E5E}
/* a strip of film: black base, sprocket holes along both edges */
html.px-a4 .a4-strip{list-style:none;margin:0;padding:26px 10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 8px;background:
  repeating-linear-gradient(90deg,transparent 0 9px,#F4F2EE 9px 19px,transparent 19px 28px) 0 7px/100% 11px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 9px,#F4F2EE 9px 19px,transparent 19px 28px) 0 calc(100% - 7px)/100% 11px no-repeat,
  #141414}
html.px-a4 .a4-strip li{position:relative;min-width:0}
html.px-a4 .a4-fr{position:relative;display:block;color:#111;text-decoration:none;outline:none;transition:transform .28s cubic-bezier(.2,.8,.2,1);transform-origin:center}
html.px-a4 .a4-ph{display:flex;flex-direction:column;justify-content:space-between;gap:6px;aspect-ratio:3/2;padding:10px;background:#F7F5F0;box-shadow:inset 0 0 0 1px #111;overflow:hidden}
html.px-a4 .a4-ty{align-self:flex-start;border:1px solid #111;padding:2px 6px;font:700 13px/1.1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
html.px-a4 .a4-out{font:400 clamp(17px,1.9vw,26px)/.95 'Anton',Impact,sans-serif;text-transform:uppercase;overflow-wrap:anywhere}
html.px-a4 .a4-dt{font:13px/1.1 'JetBrains Mono',monospace;color:#5E5E5E}
html.px-a4 .a4-no{display:flex;justify-content:space-between;align-items:center;padding:5px 2px 0;font:700 13px/1 'JetBrains Mono',monospace;color:#E8B931;letter-spacing:.06em}
html.px-a4 .a4-no i{font-style:normal;opacity:.7}
/* the loupe: the frame comes up to the eye */
html.px-a4 .a4-strip li:hover,html.px-a4 .a4-strip li:focus-within{z-index:3}
html.px-a4 .a4-fr:hover,html.px-a4 .a4-fr:focus-visible{transform:scale(1.34)}
html.px-a4 .a4-fr:hover .a4-ph,html.px-a4 .a4-fr:focus-visible .a4-ph{box-shadow:inset 0 0 0 1px #111,0 0 0 3px #F4F2EE,0 0 0 5px #111,0 18px 40px rgba(0,0,0,.45)}
html.px-a4 .a4-fr:hover .a4-no,html.px-a4 .a4-fr:focus-visible .a4-no{opacity:0}
/* grease pencil */
html.px-a4 .a4-ring{position:absolute;left:-9%;top:-16%;width:118%;height:118%;overflow:visible;pointer-events:none}
html.px-a4 .a4-ring path{fill:none;stroke:#C8321A;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;opacity:.92}
html.px-a4 .a4-ring.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.5,.1,.2,1)}
html.px-a4 .a4-fr:hover .a4-ring,html.px-a4 .a4-fr:focus-visible .a4-ring{opacity:.35}
html[data-tod=night].px-a4 .a4-sheet{background:#1A1A1C;border-color:#EDEBE6;color:#EDEBE6}
html[data-tod=night].px-a4 .a4-head,html[data-tod=night].px-a4 .a4-foot{color:#ADAAA3}
html[data-tod=night].px-a4 .a4-strip{background:
  repeating-linear-gradient(90deg,transparent 0 9px,#1A1A1C 9px 19px,transparent 19px 28px) 0 7px/100% 11px no-repeat,
  repeating-linear-gradient(90deg,transparent 0 9px,#1A1A1C 9px 19px,transparent 19px 28px) 0 calc(100% - 7px)/100% 11px no-repeat,
  #050505}
html[data-tod=night].px-a4 .a4-ring path{stroke:#E5492E}
html[data-tod=night].px-a4 .a4-fr:hover .a4-ph,html[data-tod=night].px-a4 .a4-fr:focus-visible .a4-ph{box-shadow:inset 0 0 0 1px #111,0 0 0 3px #1A1A1C,0 0 0 5px #EDEBE6,0 18px 40px rgba(0,0,0,.7)}
@media (max-width:1000px){html.px-a4 .a4-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
html.px-a4 .a4-toggle{display:block;margin:0 0 10px}
html.px-a4 .a4-sheet{padding:12px 10px 10px}
html.px-a4 .a4-strip{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 8px}
html.px-a4 .a4-out{font-size:19px}
html.px-a4 .a4-fr:hover,html.px-a4 .a4-fr:focus-visible{transform:scale(1.12)}
}
@media (prefers-reduced-motion:reduce){html.px-a4 .a4-fr{transition:none}html.px-a4 .a4-ring.on path{transition:none}}

/* A6 · diff view between years. Everything is scoped under html.px-a6. */
html.px-a6{--a6-red:#C8321A;--a6-ok:#1F7A3F;--a6-delbg:rgba(200,50,26,.08);--a6-addbg:rgba(31,122,63,.09)}
html.px-a6[data-tod=night]{--a6-red:#FF6B52;--a6-ok:#5FD08A;--a6-delbg:rgba(229,73,46,.16);--a6-addbg:rgba(95,208,138,.13)}

/* a callout while a past year is on screen: the app's sentence steps out, ours stands in */
html.px-a6 .stage .co[data-a6=over] > p:nth-of-type(2){display:none}
html.px-a6 .stage .co > .a6-box:empty{display:none}
html.px-a6 .stage .a6-box{font-size:16px;line-height:1.45}
html.px-a6 .stage .a6-box p{margin:0}
html.px-a6 .stage .a6-box .a6-c{font:14px/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--muted,#5E5E5E)}
html.px-a6 .stage .a6-del{color:var(--a6-red);background:var(--a6-delbg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:1.6em;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
html.px-a6 .stage .a6-del del{text-decoration:line-through;text-decoration-thickness:1.5px}
html.px-a6 .stage .a6-del .a6-c,html.px-a6 .stage .a6-add .a6-c{color:inherit}
html.px-a6 .stage .a6-del.gone{max-height:0;opacity:0}
html.px-a6 .stage .a6-add{color:var(--a6-ok);background:var(--a6-addbg);transition:color .5s,background .5s}
html.px-a6 .stage .a6-add ins{text-decoration:none}
html.px-a6 .stage .a6-add.kept{color:var(--ink,#111);background:transparent}
html.px-a6 .stage .a6-del > span,html.px-a6 .stage .a6-add > span{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700}
html.px-a6 .stage .a6-add.kept > span{opacity:.35}
@media (min-width:1241px){html.px-a6 .stage .co-2 > .a6-box,html.px-a6 .stage .co-3 > .a6-box,html.px-a6 .stage .co-5 > .a6-box{margin-left:20px}}

/* the slider: under the portrait stage on desktop, between the portrait and the notes on phones. Never over the portrait. */
html.px-a6 .stage > .a6{box-sizing:border-box;font:13px/1.4 'JetBrains Mono',ui-monospace,monospace;color:var(--muted,#5E5E5E)}
@media (min-width:1241px){
html.px-a6 .stage{margin-bottom:128px}
html.px-a6 .stage > .a6{position:absolute;left:0;right:0;top:calc(100% + 26px)}
}
@media (max-width:1240px){
html.px-a6 .stage > .a6{order:1;margin:18px 0 26px;position:relative;z-index:2}
html.px-a6 .stage > .co{order:2}
}
html.px-a6 .a6-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;margin-bottom:2px}
html.px-a6 .a6-cmd{font-weight:700;color:var(--ink,#111);font-size:14px;white-space:nowrap}
html.px-a6 .a6-cmd i{font-style:normal;color:var(--a6-red)}
html.px-a6 .a6[data-past] .a6-a{color:var(--a6-red)}
html.px-a6 .a6[data-past] .a6-b{color:var(--a6-ok)}
html.px-a6 .a6-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;background:none;cursor:ew-resize;outline:none}
html.px-a6 .a6-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--ink,#111) var(--a6p,100%),var(--line,#DDD) var(--a6p,100%))}
html.px-a6 .a6-range::-moz-range-track{height:2px;background:linear-gradient(to right,var(--ink,#111) var(--a6p,100%),var(--line,#DDD) var(--a6p,100%))}
html.px-a6 .a6-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:26px;margin-top:-12px;border:1.5px solid var(--ink,#111);border-radius:0;background:var(--a6-red);box-shadow:3px 3px 0 var(--ink,#111);transition:transform .15s}
html.px-a6 .a6-range::-moz-range-thumb{width:16px;height:24px;border:1.5px solid var(--ink,#111);border-radius:0;background:var(--a6-red);box-shadow:3px 3px 0 var(--ink,#111)}
html.px-a6 .a6-range:hover::-webkit-slider-thumb,html.px-a6 .a6-range:active::-webkit-slider-thumb{transform:translateY(-2px)}
html.px-a6 .a6-range:focus-visible{outline:2px solid var(--a6-red);outline-offset:2px}
html.px-a6 .a6-ticks{position:relative;height:22px;margin:-8px 9px 0}
html.px-a6 .a6-ticks span{position:absolute;top:0;transform:translateX(-50%);padding-top:9px;white-space:nowrap}
html.px-a6 .a6-ticks span::before{content:'';position:absolute;left:50%;top:0;width:1px;height:6px;background:currentColor}
html.px-a6 .a6-ticks span:first-child{transform:translateX(-9px)}html.px-a6 .a6-ticks span:first-child::before{left:9px}
html.px-a6 .a6-ticks span:last-child{transform:translateX(calc(-100% + 9px))}html.px-a6 .a6-ticks span:last-child::before{left:auto;right:9px}
html.px-a6 .a6-ticks span[data-on]{color:var(--ink,#111);font-weight:700}
@media (max-width:640px){
html.px-a6 .a6-ticks span[data-y="2017"],html.px-a6 .a6-ticks span[data-y="2019"]{color:transparent}
html.px-a6 .a6-ticks span[data-y="2017"]::before,html.px-a6 .a6-ticks span[data-y="2019"]::before{background:var(--muted,#5E5E5E)}
html.px-a6 .a6-stat{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
html.px-a6 .stage .a6-del,html.px-a6 .stage .a6-add,html.px-a6 .a6-range::-webkit-slider-thumb{transition:none}
}

/* A7 · Print registration on scroll: the red plate (a text-shadow) sits --a7 px off the ink and slides into register (see a7.js). */
html.px-a7 h2.a7{text-shadow:calc(var(--a7,0) * 1px) calc(var(--a7,0) * .55px) 0 #C8321A,calc(var(--a7,0) * -.3px) calc(var(--a7,0) * -.2px) 0 rgba(17,17,17,.18)}
html.px-a7[data-tod=night] h2.a7{text-shadow:calc(var(--a7,0) * 1px) calc(var(--a7,0) * .55px) 0 #E5492E,calc(var(--a7,0) * -.3px) calc(var(--a7,0) * -.2px) 0 rgba(237,235,230,.2)}
/* the "+5 this week" badge inside the Writing heading is its own print: no red ghost on it */
html.px-a7 h2.a7 .w-pace{text-shadow:none}
@media print{html.px-a7 h2.a7{text-shadow:none}}

/* A8 · Projects as a deploy pipeline */
html.px-a8 #projects .a8-card{position:relative}
html.px-a8 .a8-pipe{position:absolute;left:0;right:0;top:0;height:20px;pointer-events:none;font:700 13px/1 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:lowercase;color:var(--muted,#5E5E5E);opacity:0;transition:opacity .35s}
html.px-a8 .a8-pipe.run{opacity:1}
/* the line */
html.px-a8 .a8-line{position:absolute;left:0;top:0;height:3px;width:100%;background:#C8321A;transform:scaleX(0);transform-origin:left center}
html.px-a8 .a8-pipe.run .a8-line{transform:scaleX(1);transition:transform 1s cubic-bezier(.45,.05,.3,1)}
html.px-a8 .a8-pipe.done.ok .a8-line{background:#1F9D55;transition:transform 1s cubic-bezier(.45,.05,.3,1),background .25s}
/* the three stages: a tick on the line and its name, lit as the line passes */
html.px-a8 .a8-s{position:absolute;top:0;padding:7px 0 0 6px;border-left:2px solid currentColor;height:9px;font-weight:700;opacity:0;white-space:nowrap}
html.px-a8 .a8-pipe.run .a8-s{opacity:1;transition:opacity .2s}
html.px-a8 .a8-pipe.run .a8-s:nth-of-type(2){transition-delay:.33s}
html.px-a8 .a8-pipe.run .a8-s:nth-of-type(3){transition-delay:.66s}
html.px-a8 .a8-pipe.done .a8-s{opacity:0;transition:opacity .15s 0s!important}
/* the result takes their place */
html.px-a8 .a8-res{position:absolute;right:0;top:0;padding:7px 8px 0;font-style:normal;white-space:nowrap;opacity:0;transform:translateY(-3px)}
html.px-a8 .a8-pipe.done .a8-res{opacity:1;transform:none;transition:opacity .25s .1s,transform .25s .1s}
html.px-a8 .a8-pipe.ok .a8-res{color:#157A41}
html.px-a8 .a8-pipe.bad .a8-res{color:#C8321A}
html.px-a8 .a8-pipe.bad .a8-line{background:#C8321A}
/* the studio card is ink-coloured: lighter text there */
html.px-a8 .cl-main .a8-pipe{color:#C9C6BF}
html.px-a8 .cl-main .a8-pipe.ok .a8-res{color:#4ADE80}
html.px-a8 .cl-main .a8-pipe.done.ok .a8-line{background:#4ADE80}
/* product rows have no top padding: the pipeline sits in the gap above the row */
html.px-a8 #projects .cl-row:not(.cl-main) .a8-pipe{top:-1px}
html.px-a8 #projects .cl-row:not(.cl-main) .a8-s,html.px-a8 #projects .cl-row:not(.cl-main) .a8-res{padding-top:6px}
html[data-tod=night].px-a8 .a8-line{background:#E5492E}
html[data-tod=night].px-a8 .a8-pipe.done.ok .a8-line{background:#4ADE80}
html[data-tod=night].px-a8 .a8-pipe.ok .a8-res{color:#4ADE80}
html[data-tod=night].px-a8 .a8-pipe.bad .a8-res{color:#E5492E}
html[data-tod=night].px-a8 .cl-main .a8-pipe{color:#5E5E5E}
html[data-tod=night].px-a8 .cl-main .a8-pipe.ok .a8-res{color:#157A41}
html[data-tod=night].px-a8 .cl-main .a8-pipe.done.ok .a8-line{background:#1F9D55}
@media (prefers-reduced-motion:reduce){html.px-a8 .a8-pipe,html.px-a8 .a8-pipe *{transition:none!important}}

/* A10 · Signature that signs for real: the site's SVG signature steps aside for a canvas drawn with pen physics (see a10.js). */
html.px-a10 svg.sig{visibility:hidden}
html.px-a10 .a10-sig{position:absolute;display:block;cursor:pointer;z-index:1}
/* the pen's underline under the email, after "copy" */
html.px-a10 .a10-line{position:absolute;z-index:60;pointer-events:none;overflow:visible;transition:opacity .6s ease}
html.px-a10 .a10-line.out{opacity:0}
@media print{html.px-a10 .a10-line{display:none}}