/* ===== Technology cues. Quiet, precise, and each one removable on its own. =====
   1. viewfinder corners on image tiles      (block 1)
   2. scroll-progress hairline in the header (block 2)
   4. live local-time readout in the footer  (block 4)                              */

:root{--tech-accent:#7a8450}
html[data-theme=dark]{--tech-accent:#e2a56e}

/* ---- 1. viewfinder corners: four brackets close in on an image when you hover it ---- */
.projects .picture,.gallery-image{--vf:#f6f4ec}
.projects .picture::before,.gallery-image::before{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;opacity:0;transform:scale(1.07);
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1);
  background:
   linear-gradient(var(--vf),var(--vf)) left top/20px 1.5px no-repeat,
   linear-gradient(var(--vf),var(--vf)) left top/1.5px 20px no-repeat,
   linear-gradient(var(--vf),var(--vf)) right top/20px 1.5px no-repeat,
   linear-gradient(var(--vf),var(--vf)) right top/1.5px 20px no-repeat,
   linear-gradient(var(--vf),var(--vf)) left bottom/20px 1.5px no-repeat,
   linear-gradient(var(--vf),var(--vf)) left bottom/1.5px 20px no-repeat,
   linear-gradient(var(--vf),var(--vf)) right bottom/20px 1.5px no-repeat,
   linear-gradient(var(--vf),var(--vf)) right bottom/1.5px 20px no-repeat}
a.project:hover .picture::before,a.project:focus-visible .picture::before,
.gallery-card:hover .gallery-image::before,.gallery-card:focus-visible .gallery-image::before,.gallery-card.is-open .gallery-image::before{opacity:.95;transform:none}
@media(hover:none){.projects .picture::before,.gallery-image::before{display:none}}

/* ---- 2. scroll progress: a thin line along the bottom edge of the header ---- */
.scroll-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--tech-accent);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9;pointer-events:none;will-change:transform}

/* ---- 4. live local time ---- */
.sys-time{display:inline-flex;align-items:center;gap:8px;font:10px/1 monospace;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;opacity:.78}
.sys-time::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tech-accent);animation:techPulse 2.6s ease-in-out infinite}
@keyframes techPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tech-accent) 55%,transparent)}60%{box-shadow:0 0 0 7px transparent}}
@media(max-width:750px){footer .sys-time{order:3;width:100%}}

@media(prefers-reduced-motion:reduce){.sys-time::before{animation:none}.projects .picture::before,.gallery-image::before{transition:none}}

/* keep the hover pills inside the viewfinder frame, not on top of a corner bracket */
.projects .picture>span{right:34px;bottom:32px}
.gallery-image>span{left:34px;bottom:32px}
@media(max-width:550px){.projects .picture>span{right:18px;bottom:16px}}

/* ---- 5. NEDS.AI section: a status chip per product and the leadership line ---- */
.notes-line{margin:-4px 0 28px;max-width:30ch;font:italic clamp(20px,2.5vw,34px)/1.18 Georgia,serif;letter-spacing:-.02em;opacity:.82}
.lab-description{font-size:clamp(15px,1.5vw,19px);font-weight:500;letter-spacing:-.01em;color:#252820}

/* each product row: name, what it is, and whether it is live */
.lab-note .products a{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:6px 18px}
.p-stat{display:inline-flex;align-items:center;gap:7px;align-self:center;font:9px/1 monospace;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px 5px 9px;border:1px solid currentColor;border-radius:20px;white-space:nowrap}
.p-stat i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-stat.is-live{color:#3a6b2c}.p-stat.is-live i{background:#4f8f3b;animation:statLive 2.2s ease-in-out infinite}
.p-stat.is-beta{color:#8a5a12}.p-stat.is-beta i{background:#c98b2b}
@keyframes statLive{0%,100%{box-shadow:0 0 0 0 rgba(79,143,59,.55)}60%{box-shadow:0 0 0 6px rgba(79,143,59,0)}}

@media(max-width:550px){
  .lab-note .products a{grid-template-columns:1fr auto}
  .lab-note .products em{grid-column:1/-1;grid-row:2}
}
@media(prefers-reduced-motion:reduce){.p-stat.is-live i{animation:none}}
.notes-line{max-width:none}


/* dark theme: the scroll indicator is a medium blue instead of copper */
html[data-theme=dark] .scroll-progress{background:#4f86e8}

/* theme toggle: smaller, centered with the menu links */
header nav{align-items:center}
.theme-toggle{width:22px;height:22px;margin:0 0 0 6px;align-self:center}
.theme-toggle svg{width:11px;height:11px}

/* ---- NEDS.AI and YouTube tiles: an image / clip fades in behind the content on hover ---- */
.notebook .lab-note,.notebook .video-note{position:relative;overflow:hidden;isolation:isolate}
.notebook .lab-note>:not(.hover-bg),.notebook .video-note>:not(.hover-bg){position:relative;z-index:1}
.hover-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease,ease),transform 1.1s var(--ease,ease);background:var(--bg) center/cover no-repeat}
.hover-bg::after{content:"";position:absolute;inset:0}
.lab-note .hover-bg::after{background:linear-gradient(rgba(239,236,226,.78),rgba(239,236,226,.64) 50%,rgba(239,236,226,.82))}
.video-note .hover-bg::after{background:linear-gradient(rgba(14,16,12,.55),rgba(14,16,12,.35) 50%,rgba(14,16,12,.8))}
.video-note:hover .hover-bg,.video-note:focus-visible .hover-bg{opacity:1;transform:none}
@media(hover:none){.hover-bg{display:none}}
html[data-theme=dark] .lab-note .hover-bg::after{background:linear-gradient(rgba(223,226,236,.8),rgba(223,226,236,.55) 55%,rgba(223,226,236,.85))}

/* the leadership line now lives inside the NEDS.AI tile */
.lab-note .notes-line{margin:-14px 0 14px;max-width:22ch;font-size:clamp(17px,1.7vw,23px);line-height:1.2;opacity:.9}
@media(prefers-reduced-motion:reduce){.hover-bg{transition:none;transform:none}}
.hover-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* homepage archive strip: tinted in the theme's own color to read as past work, full color on hover */
:root{--af-tone:#a39682}
html[data-theme=dark]{--af-tone:#5d6c8e}
.af-panel{isolation:isolate}
.af-panel::before{content:"";position:absolute;inset:0;z-index:0;background:var(--af-tone);mix-blend-mode:color;opacity:.7;pointer-events:none;transition:opacity .6s ease}
.af-panel:hover::before,.af-panel:focus-visible::before,.af-panel:active::before{opacity:0}
.af-panel{filter:contrast(.84) brightness(1.07);transition:flex .65s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.af-panel:hover,.af-panel:focus-visible,.af-panel:active{filter:none}
.af-side p{max-width:none;white-space:nowrap}
@media(max-width:750px){.af-side p{white-space:normal}}
@media(prefers-reduced-motion:reduce){.af-panel::before{transition:none}}

/* the title line in the About heading uses the serif italic, like the other headings */
.info h2 em{font-family:Georgia,serif;font-weight:400}
.af-side{max-width:none}

/* NEDS.AI tile: each product row swaps in its own image behind the tile */
.lab-note .hover-bg::after{background:linear-gradient(rgba(239,236,226,.78),rgba(239,236,226,.64) 50%,rgba(239,236,226,.84))}
.lab-note:has(.products li:nth-child(1):hover) .bg-1,.lab-note:has(.products li:nth-child(1):focus-within) .bg-1,
.lab-note:has(.products li:nth-child(2):hover) .bg-2,.lab-note:has(.products li:nth-child(2):focus-within) .bg-2,
.lab-note:has(.products li:nth-child(3):hover) .bg-3,.lab-note:has(.products li:nth-child(3):focus-within) .bg-3{opacity:1;transform:none}
.lab-note .bg-2{background-position:50% 40%}
.lab-note .bg-3{background-position:58% 30%}
/* Availability stays visible outside the About tabs. */
.info .availability-summary{font-size:clamp(15px,1.35vw,19px);line-height:1.55;max-width:48ch;margin:22px 0 25px;color:var(--ink);font-weight:500}.contact-availability{font-size:clamp(14px,1.4vw,19px);line-height:1.5;max-width:48ch;margin:0 0 28px}.lab-note .lab-description{font-size:clamp(15px,1.4vw,19px);line-height:1.5;max-width:35ch;margin:0 0 28px;font-weight:400}.lab-note h3 a{color:inherit}.lab-note h3 a:hover{text-decoration:none;opacity:.75}
.lab-note .lab-description{white-space:normal}.info .about-main{max-height:none}.info .about-mail{margin-top:22px!important}@media(min-width:751px){.info .portrait{align-self:start}}

/* project cards: a short clip plays over the still when you hover the card */
.picture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.picture video.ready{opacity:1}
@media(hover:none){.picture video{display:none}}

/* the name in the header is one sans-serif, not a sans plus a serif italic */
.site-first em{font-family:inherit;font-style:normal;font-weight:inherit}