/* Bruno Argenta: one page. White, Inter, and a landscape written in text at the top (ascii.js). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #FFFFFF;
  --ink: #111111;      /* the name, hover states */
  --text: #333333;     /* running text */
  --meta: #757575;     /* dates, labels, the clock: 4.6:1 on white, enough for 13 px text */
  --line: #ECECEC;     /* dividers */
  --card: #F0F0F0;     /* the photo's background while it loads */
  --dots: #BDBDBD;     /* dotted underlines at rest */
  /* the four tones of the arts (ascii.js, TONES), light to dark; main.js sets them from the palette in use */
  --tone-1: #D1D5DA; --tone-2: #A9B2BB; --tone-3: #7A8896; --tone-4: #2E4256;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --col: 520px;        /* the column: photo, text, list (narrow, like the reference) */
  --gutter: 20px;
  --hero-h: 180px;     /* the band of text art at rest */
  --avatar: 112px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.45, .05, .2, 1);
  --ease-rise: cubic-bezier(.7, 0, .2, 1); /* the white rising: slow start, settles softly */
}
@media (min-width: 640px) { :root { --gutter: 32px; --avatar: 136px; --hero-h: 200px; } }

html { background: var(--bg); }
html.intro { overflow: hidden; } /* while the landscape plays, nothing scrolls */
/* Small type and tight spacing, like the references (benji.org 14/20, tutundzhian.com 15/22, shwn.design 15) */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/20px 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.col { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p { text-wrap: pretty; }

/* ---- The hero: the landscape, then only the sky ----
   At rest it is the sky band, as wide as the column. While the intro plays it fills the screen; main.js then shrinks
   it (inline width and height) until the white has risen over the forest and the mountains. The bottom of the text
   always fades into the page. */
.hero { position: relative; width: min(100% - 2 * var(--gutter), var(--col)); height: var(--hero-h); margin: 0 auto; overflow: hidden; }
html:not(.intro) .hero.birds { cursor: crosshair; } /* Home: a click in the art lets a bird out */
html.intro .hero { width: 100%; height: 100svh; }
/* (the fade at the bottom is painted inside the drawing, ascii.js FADE_PX: Safari on the iPad ignored a CSS mask here) */
.sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---- The pages ----
   One at a time (the others are hidden). During the intro, Home waits below, out of focus, and rises into place with
   the white (main.js adds .in). Changing page: the old one goes out of focus (.out) while the art grows over it; the
   new one starts out of focus (.pre) and comes into place (.in) while the white rises. */
.page { position: relative; padding-bottom: 260px; } /* room for the dock and its sub-dock */
.page[hidden] { display: none; }
html.intro .page:not(.in), .page.pre { opacity: 0; transform: translateY(32px); filter: blur(8px); }
.page.in { opacity: 1; transform: none; filter: blur(0); transition: opacity 700ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 150ms, filter 700ms var(--ease-out) 200ms; }
.page.out { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 350ms var(--ease-in), transform 350ms var(--ease-in), filter 350ms var(--ease-in); }
.avatar { display: block; width: var(--avatar); height: var(--avatar); margin-top: calc(-0.45 * var(--avatar)); border-radius: 16px; object-fit: cover; background: var(--card); }
.name { margin: 20px 0 0; font-size: inherit; font-weight: 500; line-height: inherit; color: var(--ink); }
.meta { color: var(--meta); font-size: 13px; }
.updated { margin: 0; }
.bio { margin-top: 24px; }
.bio p { margin: 0 0 .85em; }
.bio p:last-child { margin-bottom: 0; }
.bio strong { font-weight: 500; color: var(--ink); }

/* Links and "Let's talk": a dotted line at rest, a solid one under the mouse */
a { color: inherit; text-decoration: underline dotted var(--dots); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.talk { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted var(--dots); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { a:hover, .talk:hover { text-decoration-color: var(--ink); text-decoration-style: solid; } }
.talk[aria-expanded="true"] { text-decoration-color: var(--ink); text-decoration-style: solid; }
a:focus-visible, .talk:focus-visible, .dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.row-main a[target="_blank"]::after, .bio a[target="_blank"]::after { content: " ↗"; color: var(--meta); font-size: .85em; } /* opens somewhere else */

/* Lists: a label on the left (a year, a place; only when it changes), the main text, something small on the right */
.list { margin-top: 32px; }
.list h2 { margin: 0 0 6px; font: inherit; font-size: 13px; color: var(--meta); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; }
.row-label { padding: 8px 0; color: var(--meta); }
.row-main { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:first-child .row-main { border-top: 1px solid var(--line); }
.row-side { flex: none; color: var(--meta); }
@media (max-width: 479px) { .row { grid-template-columns: 56px 1fr; } .row-side { display: none; } }

.reel-wrap { margin-top: 24px; }
.reel { display: flex; gap: 16px; margin: 0; padding: 0 calc(100% - min(100%, 400px)) 4px 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.reel::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(100%, 400px); }
.grid-wrap { margin-top: 24px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 479px) { .grid { gap: 16px 12px; } }
.tile .caption { flex-direction: column; gap: 0; padding-top: 6px; }
/* a cover floating by the pointer, over a row of the list */
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 200px; border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 16px 32px -12px rgba(0, 0, 0, .25); opacity: 0; scale: .96; pointer-events: none; transition: opacity 180ms ease, scale 220ms var(--ease-out); }
.peek.on { opacity: 1; scale: 1; }
.peek img { display: block; width: 100%; height: auto; }
.card-link { display: block; color: inherit; text-decoration: none; }
.cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--card); overflow: hidden; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-name { color: var(--meta); }
.caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; }
a.card-link .caption > span:first-child { text-decoration: underline dotted var(--dots); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { a.card-link:hover .caption > span:first-child { text-decoration-color: var(--ink); text-decoration-style: solid; } }

/* About: the polaroid (a white frame, the wide strip at the bottom, a little crooked), behaving as on the previous
   site: at rest the photo is a hair softer, like a print on a shelf; under the mouse it lifts 6 px, straightens,
   tilts a little towards the pointer (main.js sets --rx/--ry, up to 3 degrees) and develops to full colour in 500 ms;
   a tap (phone, .on, 2.5 s) or keyboard focus lifts and develops it without the tilt. The figure is only the area
   the mouse reads, and it never moves: the card inside (.pcard) is what tilts and lifts. (If the figure itself
   moved, its edge would slip out from under the pointer, lose the hover, fall back, and shiver.)
   Nothing here repaints while it moves, so the start of the hover does not hitch in Safari: the card is composited
   from the start (a 3D transform at rest), the photo's filter stays on its own layer (will-change) and goes between
   two explicit filter lists, the two shadows are static pseudo-elements that cross-fade by opacity, and no z-index
   changes on hover (a new stacking context would rebuild the layer tree at that instant).
   It meets the art exactly as the Home's headshot does: the same overlap of the fade. */
.polaroid { --rx: 0deg; --ry: 0deg; position: relative; width: 220px; margin: calc(-0.45 * var(--avatar)) 0 0; cursor: default; } /* (the card's outer width: a 200 px photo in a 10 px frame; 220 in the frame from 640 px up) */
.pcard { position: relative; padding: 10px 10px 40px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1) rotate(-2.5deg); will-change: transform;
  transition: transform 300ms var(--ease-out); }
.pcard::before, .pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; will-change: opacity; transition: opacity 300ms ease; } /* (will-change: their layers exist from the start, so none is made at the instant the hover begins) */
.pcard::before { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px -10px rgba(0, 0, 0, .22); }                /* resting on the page */
.pcard::after { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 24px 44px -16px rgba(0, 0, 0, .32); opacity: 0; }     /* lifted */
.pcard img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--card); filter: saturate(.88) contrast(.97); will-change: filter; transition: filter 600ms ease; }
@media (hover: hover) and (pointer: fine) {
  .polaroid:hover .pcard { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.03) rotate(0deg); transition-duration: 200ms; }
  .polaroid:hover .pcard::before { opacity: 0; }
  .polaroid:hover .pcard::after { opacity: 1; }
  .polaroid:hover img { filter: saturate(1) contrast(1); transition-duration: 500ms; }
}
.polaroid.on .pcard, .polaroid:focus-visible .pcard { transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(-6px) scale(1.03) rotate(0deg); }
.polaroid.on .pcard::before, .polaroid:focus-visible .pcard::before { opacity: 0; }
.polaroid.on .pcard::after, .polaroid:focus-visible .pcard::after { opacity: 1; }
.polaroid.on img, .polaroid:focus-visible img { filter: saturate(1) contrast(1); transition-duration: 500ms; }
.polaroid:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (pointer: coarse) { .polaroid { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
@media (min-width: 640px) { .polaroid { width: 240px; } }

.foot { margin-top: 40px; }
.foot::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: 24px; background: var(--line); }
.foot p { margin: 0; }
.foot .more { margin-top: 4px; } /* the second line: the © */
/* The butterfly: three characters, resting just above the end of "Switzerland". Under the mouse (or a tap) it flies to
   the art at the top, flapping, shrinking to the art's size and taking its colour, and lands among the characters
   (ascii.js keeps drawing it there, with a flap now and then). butterfly.js. */
.perch { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: baseline; }
.butterfly { position: absolute; left: 2px; bottom: 1.05em; margin: 0; padding: 0; border: 0; background: none; font: 11px/1 var(--mono); color: var(--text); white-space: pre; cursor: pointer; transform: rotate(-12deg); transform-origin: 50% 100%; transition: color 1.6s ease; -webkit-tap-highlight-color: transparent; }
.butterfly:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
/* resting midway (About: on the end of the "Zurich" line), placed on the page with left and top; the next pass of the mouse sends it on */
.butterfly.resting { position: absolute; right: auto; bottom: auto; width: auto; height: auto; line-height: 1; z-index: 45; color: var(--text); transform: rotate(-8deg); transform-origin: 50% 100%; }
.butterfly.flying { position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: auto; height: auto; line-height: 1; z-index: 70; color: #2E4256; pointer-events: none; transform-origin: 0 0; transition: none; } /* (bottom: auto: a button with top and bottom stretches, and its text sits in the middle of the screen) */

/* The dock (dock.js): Home, Work and About near the bottom, high enough to stay clear of the Mac's own dock. One
   liquid shape: a grey body made of one blob per page, melted together by the goo filter (index.html); the active
   page is a big disc on a soft white one (a drop, moved by dock.js), the others small. Glass: a disc per page blurs
   what is under it, so text passing beneath goes soft but stays visible. Changing page, everything moves with a
   small overshoot. */
:root { --ease-goo: cubic-bezier(.3, 1.25, .45, 1); }
/* the dock's colours, from the art's tones (dock.js, tintDock): the body, the icons, the chosen one, a hover, a disabled arrow */
.dock { --dock-body: #E1E4E7; --dock-icon: #7A8896; --dock-on: #2E4256; --dock-hover: #546576; --dock-off: #A9B2BB; }
.dock-defs feFlood { flood-color: var(--dock-body); }
.dock-white .halo { fill: var(--dock-body); }
.dock { --a: 64px; position: fixed; left: calc(50% - var(--dock-w, 200px) / 2); bottom: 110px; z-index: 40; width: var(--dock-w, 200px); height: var(--dock-h, 130px); margin: 0; padding: 0; transition: opacity 600ms ease, width 620ms var(--ease-goo), left 620ms var(--ease-goo); } /* (width and left: the "inline" shape stretches) */
@media (max-width: 639px) { .dock { bottom: 28px; } } /* on the phone, close to Safari's address bar (Bruno, 26/10/2026) */
html.intro .dock { opacity: 0; pointer-events: none; }
.dock-defs { position: absolute; width: 0; height: 0; }
.dock-body { position: absolute; inset: 0; filter: url(#goo) drop-shadow(0 8px 16px rgba(20, 30, 40, .10)); opacity: .86; }
.blob { position: absolute; left: 0; top: 0; width: var(--a); height: var(--a); border-radius: 50%; background: var(--dock-body); transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); transform-origin: 0 0; transition: transform 620ms var(--ease-goo); }
/* the sub-dock's discs: they bud out of the Work disc one after another (--d); the chosen one is bigger (--s) */
.blob.sub { width: 30px; height: 30px; transition: transform 620ms var(--ease-goo) var(--d, 0ms); }
/* the liquid: the white under the chosen page and under the chosen way of showing the projects, each on a grey halo
   (same grey as the body, so unseen) that keeps the body around the white; dock.js draws them, frame by frame */
.dock-white { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dock-glass { position: absolute; inset: 0; pointer-events: none; }
.glass { position: absolute; left: 0; top: 0; width: var(--a); height: var(--a); border-radius: 50%; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); transform-origin: 0 0; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .75), inset 0 1px 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04); transition: transform 620ms var(--ease-goo); }
/* the sub-dock's glass: the same, smaller; it comes and goes with its disc */
.glass.sub { width: 30px; height: 30px; opacity: 0; transition: transform 620ms var(--ease-goo) var(--d, 0ms), opacity 300ms ease var(--d, 0ms); }
.glass.sub.on { opacity: 1; }
.dock-items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.item { position: absolute; left: 0; top: 0; width: var(--w, var(--a)); height: var(--w, var(--a)); transform: translate(var(--x, 0), var(--y, 0)); transition: transform 620ms var(--ease-goo), width 620ms var(--ease-goo), height 620ms var(--ease-goo); }
.dot { position: relative; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dock-icon); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 200ms ease; }
.dot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.dot svg { display: block; width: 42%; height: 42%; fill: currentColor; }
.dot[aria-current="page"] { color: var(--dock-on); }
@media (hover: hover) { .dot:not([aria-current]):hover { color: var(--dock-hover); } }
.glass.hot { transform: translate(var(--x, 0), var(--y, 0)) scale(calc(var(--s, 1) * 1.08)); } /* the glass swells a little under the mouse */
.dot:focus-visible { outline-offset: 2px; border-radius: 50%; }
/* its name, above it, under the mouse or with the keyboard */
.dot::after { content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 3px 9px; border-radius: 6px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 4px 12px -4px rgba(0, 0, 0, .15); color: var(--text); font-size: 13px; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 150ms ease, transform 150ms var(--ease-out); }
@media (hover: hover) { .dot:hover::after { opacity: 1; transform: translate(-50%, 0); } }
.dot:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.dock.sub-open .dot[data-page="work"]::after { display: none; } /* with the sub-dock open, the label would sit on it */
/* the sub-dock's buttons, over their discs */
.dock-sub { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.subitem { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--w, 30px); height: var(--w, 30px); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dock-icon); cursor: pointer; pointer-events: auto; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); transform-origin: 0 0; transition: transform 620ms var(--ease-goo) var(--d, 0ms), width 620ms var(--ease-goo) var(--d, 0ms), height 620ms var(--ease-goo) var(--d, 0ms), opacity 300ms ease var(--d, 0ms), color 200ms ease; -webkit-tap-highlight-color: transparent; }
.subitem[hidden] { display: grid; opacity: 0; pointer-events: none; }
.dock.sub-open .subitem:not([hidden]) { opacity: 1; }
.subitem svg { display: block; width: 47%; height: 47%; }
.subitem[aria-pressed="true"] { color: var(--dock-on); }
.subitem:disabled { color: var(--dock-off); cursor: default; }
@media (hover: hover) { .subitem:not(:disabled):not([aria-pressed="true"]):hover { color: var(--dock-hover); } }
.subitem::after { content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 3px 9px; border-radius: 6px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 4px 12px -4px rgba(0, 0, 0, .15); color: var(--text); font-size: 13px; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 150ms ease, transform 150ms var(--ease-out); }
@media (hover: hover) { .subitem:not(:disabled):hover::after { opacity: 1; transform: translate(-50%, 0); } }
.subitem:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.subitem:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Touch screens: "Let's talk" gets a 44 px tall area to tap, no grey flash from the phone */
@media (pointer: coarse) {
  .talk { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .dot, .subitem { touch-action: manipulation; }
  .talk::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html.intro .page:not(.in), .page.pre, .page.in, .page.out { opacity: 1; transform: none; filter: none; transition: none; }
  .dock, .dot, .dot::after, .blob, .glass, .item, .butterfly, .subitem, .subitem::after, .peek, .pcard, .pcard::before, .pcard::after { transition: none; }
  .pcard img { filter: none; will-change: auto; transition: none; } /* the photo simply shows, in full colour */
}

/* ============ "Let's talk": the contact card (contact.js) ============
   A fixed layer over the page: the veil blurs everything except the word; the card comes out of the word, already
   turning to its back (email and LinkedIn). White paper, a hairline edge, a soft shadow: the site's own look. */
.contact *, .contact *::before, .contact *::after { box-sizing: border-box; }
.contact a { color: inherit; text-decoration: none; }
.contact button { font: inherit; }
.contact { position: fixed; inset: 0; z-index: 60; overflow: hidden; visibility: hidden; pointer-events: none; transition: visibility 0s 300ms; }
.contact.open { visibility: visible; transition-delay: 0s; }
.contact-veil { position: absolute; inset: 0; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 250ms ease;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) var(--hx, 0) var(--hy, 0) / var(--hw, 0) var(--hh, 0) no-repeat;
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat exclude, linear-gradient(#000 0 0) var(--hx, 0) var(--hy, 0) / var(--hw, 0) var(--hh, 0) no-repeat; }
.contact.open .contact-veil { opacity: 1; }
.contact.open.touch .contact-veil { pointer-events: auto; }

.contact-cards { --card-w: 340px; position: absolute; display: flex; }
.contact.open .contact-cards { pointer-events: auto; }
.contact.stack .contact-cards { inset: 0; align-items: center; justify-content: center; --card-w: min(340px, 100vw - 2 * var(--gutter)); pointer-events: none; }
.contact.open.stack .ccard, .contact.open.stack .cflip { pointer-events: auto; }

.contact .ccard { position: relative; flex: none; width: var(--card-w); aspect-ratio: 85.6 / 54; perspective: 1100px; opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.3); transition: transform 280ms cubic-bezier(.4, 0, .6, 1), opacity 200ms ease; }
.contact.open .ccard { opacity: 1; transform: none; transition: transform 520ms cubic-bezier(.2, .9, .25, 1.04), opacity 220ms ease; }
.contact .bcard { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 500ms var(--ease-out); }
.contact .bcard.tracking { transition: transform 90ms linear; }
.contact .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 800ms var(--ease-in-out); pointer-events: none; }
.contact .flip.is-back { transform: rotateY(180deg); }
.contact .flip.instant { transition: none; }
.contact .flip:not(.is-back) .front, .contact .flip.is-back .back { pointer-events: auto; }
.contact .flip.turning .cface { pointer-events: none; }

/* The card: white paper with a hairline edge */
.contact .cface { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #FFFFFF; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04), 0 24px 48px -20px rgba(0, 0, 0, .22); }
.contact .front { transform: translateZ(1px); }
.contact .back { transform: rotateY(180deg) translateZ(1px); }
/* front: the four tones of the arts as four small chips in the corner (the brand's colours), and the name under them */
.contact .front-tones { position: absolute; left: 22px; top: 22px; display: flex; gap: 5px; pointer-events: none; }
.contact .front-tones i { width: 9px; height: 9px; border-radius: 2.5px; background: var(--tone-1); }
.contact .front-tones i:nth-child(2) { background: var(--tone-2); }
.contact .front-tones i:nth-child(3) { background: var(--tone-3); }
.contact .front-tones i:nth-child(4) { background: var(--tone-4); }
.contact .front-who { position: absolute; left: 22px; bottom: 20px; display: flex; flex-direction: column; }
.contact .front-name { font-weight: 500; line-height: 1.3; color: var(--ink); }
.contact .front-role { margin-top: 1px; line-height: 1.4; color: var(--meta); }
/* back: email and LinkedIn */
.contact .back { display: flex; align-items: center; padding: 0 22px; }
.contact .bc-rows { position: relative; z-index: 1; display: grid; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; }
.contact .bc-row { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); transition: background-color 150ms ease; }
.contact .bc-row::after { content: ""; position: absolute; inset: -3px 0; }
.contact .bc-row svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--meta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 150ms ease; }
@media (hover: hover) { .contact .bc-row:hover { background: #F3F3F3; } .contact .bc-row:hover svg { stroke: var(--ink); } }
.contact .bc-row:active { background: #EBEBEB; }
.contact .bc-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* "Turn over": a hairline circle beside the card (under it on phones) */
.contact .cflip { position: relative; flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 12px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #FFFFFF; color: var(--meta); cursor: pointer;
  opacity: 0; transform: translateX(-8px); transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in), color 150ms ease, border-color 150ms ease; }
.contact.open .cflip { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out) 400ms, transform 250ms var(--ease-out) 400ms, color 150ms ease, border-color 150ms ease; }
.contact .cflip::after { content: ""; position: absolute; inset: -5px; }
.contact .cflip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--ease-out); }
@media (hover: hover) { .contact .cflip:hover { color: var(--ink); border-color: var(--dots); } .contact .cflip:hover svg { transform: rotate(45deg); } } /* under the mouse the arrow darkens; the ring only a little (a black ring read too heavy, Bruno, 26/10/2026) */
.contact .cflip:active svg { transform: rotate(90deg); }
.contact .cflip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact.stack .contact-cards { flex-direction: column; }
.contact.stack .cflip { margin: 12px 0 0; transform: translateY(-8px); }
.contact.open.stack .cflip { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .contact, .contact-veil, .contact .ccard, .contact.open .ccard, .contact .bcard, .contact .flip, .contact .cflip, .contact .cflip svg { transition: none !important; }
  .contact .ccard, .contact .bcard, .contact .cflip { transform: none; }
  .contact .cflip:hover svg, .contact .cflip:active svg { transform: none; }
}
@media (forced-colors: active) { .contact .cface, .contact .cflip { border: 1px solid ButtonText; } }