::selection { background: var(--ink); color: var(--bg); }
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }


.pun { white-space: nowrap; }
.pun i { display: inline-block; width: 0; transition: width 0.5s cubic-bezier(.2, .7, .1, 1); }
.pun b { display: inline-block; font-weight: inherit; max-width: 0; overflow: hidden; vertical-align: bottom; opacity: 0; transform: translateX(-0.25em); transition: max-width 0.5s cubic-bezier(.2, .7, .1, 1), padding 0.5s cubic-bezier(.2, .7, .1, 1), opacity 0.2s ease-out, transform 0.5s cubic-bezier(.2, .7, .1, 1); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .pun i, a:focus-visible > .pun i { width: 0.27em; }
  a:hover > .pun b, a:focus-visible > .pun b { max-width: 4em; padding-left: 0.27em; opacity: 1; transform: none; transition: max-width 0.5s cubic-bezier(.2, .7, .1, 1), padding 0.5s cubic-bezier(.2, .7, .1, 1), opacity 0.35s ease-out 0.15s, transform 0.5s cubic-bezier(.2, .7, .1, 1) 0.1s; }
}


.chrome nav a, .chrome .out a, .go a, .foot a { transition: opacity 0.3s ease-out, color 0.3s, background-color 0.3s; }
@media (hover: hover) and (pointer: fine) {
  .chrome nav[aria-label="Main"]:hover a:not(:hover), .chrome .out:hover a:not(:hover), .go:hover a:not(:hover) { opacity: 0.38; }
  .chrome nav[aria-label="Main"] a:hover, .chrome .out a:hover, .go a:hover { opacity: 1; color: var(--ink); }
}

.foot a[href="#top"]::after { content: '\2191'; display: inline-block; margin-left: 0.4em; transition: transform 0.4s cubic-bezier(.2, .7, .1, 1); }
@media (hover: hover) { .foot a[href="#top"]:hover { opacity: 1; color: var(--ink); } .foot a[href="#top"]:hover::after { transform: translateY(-4px); } }

.chrome nav[aria-label="Main"] a { padding: 6px 9px 5px; margin: 0 -9px; border-radius: 6px; }
.chrome nav[aria-label="Main"] a.now { background-color: color-mix(in srgb, var(--ink) 14%, transparent); }


.info .go, .mail { position: relative; border-bottom: 0 !important; padding-left: 1px; padding-right: 1px; }
.info .go::before, .mail::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; pointer-events: none; }
.info .go::after { content: '\2192'; display: inline-block; margin-left: 0.45em; transition: transform 0.45s var(--ease-default, ease); }
@media (hover: hover) {
  .info .go:hover, .mail:hover { opacity: 1 !important; }
  .info .go:hover::after { transform: translateX(5px); }
}
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }


.btn { transition: background-color 0.2s, transform 0.25s var(--ease-default, ease); }
.btn::after { content: '\2192'; margin-left: 0.5em; display: inline-block; transition: transform 0.35s var(--ease-default, ease); }
@media (hover: hover) { .btn:hover::after { transform: translateX(4px); } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 5px; }


.copy { all: unset; cursor: pointer; font-size: var(--cap); color: var(--ink2); padding: 4px 0; transition: color 0.2s; }
.copy:hover, .copy:focus-visible { color: var(--ink); }
.copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.copy.done { color: var(--ink); }



.peek { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: 9px 14px 8px; border-radius: 20px; background: var(--ink); color: var(--bg); font: 500 var(--cap)/1 var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity 0.16s ease-out, transform 0.22s cubic-bezier(.2, .7, .1, 1); }
.peek.on { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.proj .comp .win, .next .gw { transition: filter 0.4s; }
@media (hover: hover) and (pointer: fine) { .proj .comp .win:hover { filter: brightness(1.07); } }


.index li .n { transition: transform 0.45s var(--ease-default, ease); }
@media (hover: hover) {
  .index li:hover .n { transform: translateX(10px); }
  .index li:hover .d, .index li:hover .y { color: var(--ink); }
  .lab figure:hover figcaption { color: var(--ink); }
  #lucciola .deal img:hover { filter: brightness(1.08); }
}
.index .d, .index .y, .lab figcaption { transition: color 0.3s; }
#lucciola .deal img { transition: filter 0.4s; }


.vcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity 0.25s; }
.vcover.off { opacity: 0; transition: opacity 0.45s ease-out; }


img.fadein { opacity: 0; transition: opacity 0.6s var(--ease-smooth, ease); }
img.fadein.in { opacity: 1; }


.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0.5; pointer-events: none; }
.chrome:not(.band) .progress { opacity: 0; }


.cv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 9vh; margin-top: 10vh; }
.cv-col:nth-child(1) { grid-column: 3 / 7; }
.cv-col:nth-child(2) { grid-column: 7 / 11; }
.cv-col.jobs-col { grid-column: 3 / 13; }
.cv .kick { margin-bottom: 16px; font-weight: 400; }
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.skills li { padding: 7px 12px 6px; border: 1px solid var(--rule); border-radius: 18px; font-size: var(--t-small); line-height: 1.2; transition: background-color 0.25s, border-color 0.25s; }
@media (hover: hover) { .skills li:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: transparent; } }
.jobs { list-style: none; border-top: 1px solid var(--rule); }
.jobs li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--g); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.jobs .n { text-wrap: balance; font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; font-size: clamp(22px, 2vw, 36px); line-height: 1; letter-spacing: var(--track, 0); }
.jobs .d { color: var(--ink2); max-width: 52ch; text-wrap: pretty; }
.jobs .y { color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.contact .hello { font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.9rem); line-height: 1.3; max-width: 30ch; margin-top: 6vh; }
.contact .hello + .ask { margin-top: 3vh; }
@media (max-width: 760px) {
  .cv { display: block; margin-top: 8vh; }
  .cv-col + .cv-col { margin-top: 6vh; }
  .jobs li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .jobs .d { grid-column: 1 / -1; grid-row: 2; }
}


.big, .comp h3, h1, h2 { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .pun i, .pun b, .info .go::after, .btn, .btn::after, .peek, .index li .n, img.fadein { transition: none; }
  img.fadein { opacity: 1; }
}
@media print {
  .chrome, .peek, .wipe, .progress, .skip, video { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
}