/* Raffaele Anile, portfolio. One stylesheet, in page order. */

/* IBM Plex Mono, self-hosted (no request to Google: faster, and no visitor data sent to a third party) */
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plex-mono-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plex-mono-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plex-mono-semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plex-mono-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/plex-mono-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff') format('woff');
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ------ Tokens: colours, fonts, section inks ------ */
:root {
  color-scheme: light;
  --bg: #F2F3F4;
  --ink: #14171A;
  --muted: #50575F;
  --soft: #5E656D;
  --ghost: #D9DCE0;
  --line: rgba(20,23,26,.14);
  --dot: rgba(27,28,30,.17);
  --chip: rgba(255,255,255,.6);
  --scrim: rgba(242,243,244,.86);
  --hi: rgba(255,255,255,.65);
  --c: #2D7D91;
  --c-text: #22687A;
  --c-card: #D8EDF0;
  --m: #A63D65;
  --m-text: #A63D65;
  --m-card: #F4DCE4;
  --y: #A07616;
  --y-text: #7A5A0E;
  --y-card: #F3E6C4;
  --k-card: #E4E7EA;
  --d-ink: #2B3140;
  --d-soft: #8A93A3;
  --d-m: #A63D65;
  --d-y: #B98A1E;
  --display: 'Archivo',ui-sans-serif,system-ui,sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-move: cubic-bezier(.77,0,.175,1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101215;
  --ink: #E9ECEF;
  --muted: #9BA3AC;
  --soft: #8D959E;
  --ghost: #24272B;
  --line: rgba(233,236,239,.14);
  --dot: rgba(236,236,232,.11);
  --chip: rgba(0,0,0,.28);
  --scrim: rgba(16,18,21,.86);
  --hi: rgba(255,255,255,.09);
  --c: #62B8CC;
  --c-text: #62B8CC;
  --c-card: #16323A;
  --m: #E48AAE;
  --m-text: #E48AAE;
  --m-card: #3A1B29;
  --y: #E0B24A;
  --y-text: #E0B24A;
  --y-card: #382D11;
  --k-card: #1F2226;
  --d-ink: #D9DCE3;
  --d-soft: #7F8796;
  --d-m: #E48AAE;
  --d-y: #E0B24A;
}
.sec-c {
  --accent: var(--c);
  --accent-text: var(--c-text);
  --card: var(--c-card);
}
.sec-m {
  --accent: var(--m);
  --accent-text: var(--m-text);
  --card: var(--m-card);
}
.sec-y {
  --accent: var(--y);
  --accent-text: var(--y-text);
  --card: var(--y-card);
}
.sec-k {
  --accent: var(--ink);
  --accent-text: var(--ink);
  --card: var(--k-card);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101215;
    --ink: #E9ECEF;
    --muted: #9BA3AC;
    --soft: #8D959E;
    --ghost: #24272B;
    --line: rgba(233,236,239,.14);
    --dot: rgba(236,236,232,.11);
    --chip: rgba(0,0,0,.28);
    --scrim: rgba(16,18,21,.86);
  --hi: rgba(255,255,255,.09);
    --c: #62B8CC;
    --c-text: #62B8CC;
    --c-card: #16323A;
    --m: #E48AAE;
    --m-text: #E48AAE;
    --m-card: #3A1B29;
    --y: #E0B24A;
    --y-text: #E0B24A;
    --y-card: #382D11;
    --k-card: #1F2226;
    --d-ink: #D9DCE3;
    --d-soft: #7F8796;
    --d-m: #E48AAE;
    --d-y: #E0B24A;
  }
}

/* ------ Base elements ------ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
img { display: block; max-width: 100%; }
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 40px;
}
.display {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: .95;
}
.outline { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent,var(--ink));
  outline-offset: 3px;
  border-radius: 6px;
}
.skip:focus { top: 16px; }
button { font: inherit; color: inherit; }
section { padding: 120px 0; overflow-x: clip; position: relative; isolation: isolate; }
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer { padding-bottom: max(96px,calc(env(safe-area-inset-bottom) + 80px)); }
html { overflow-x: clip; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* no double-tap zoom delay */
p, li { text-wrap: pretty; }
@media (max-width: 760px) {
  .wrap { padding: 0 24px; }
  section { padding: 80px 0; }
}

/* ------ Section titles and compact sticky bars ------ */
.sec-title {
  color: var(--accent-text);
  font-size: clamp(20px, calc((100vw - 48px) / 13.2), 48px);   /* 'Function, celebrated' (~12.6em) fits one line */
  line-height: 1;
  margin-bottom: 40px;
}
.lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.7;
}
.stick {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 15;
}
.stick-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 24px 96px 16px 0;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16,1,.3,1),opacity .3s;
  pointer-events: none;
}
section.compact .stick-bar { transform: none; opacity: 1; }
.stick-t {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 16px;
  color: var(--accent-text);
  white-space: nowrap;
}
.stick-d {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* the bar's glass: darker than the chapter bubble, opaque at the top so content dissolves before the screen edge,
   then a long soft fade; in Chromium the fading edge also bends what passes under it like a lens */
.sb-g {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -44px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(228,231,234) 0, rgba(228,231,234,.97) 22%, rgba(230,232,235,.82) 42%, rgba(232,234,237,.55) 64%, rgba(232,234,237,.3) 84%, rgba(232,234,237,.22));
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(.96);
  backdrop-filter: blur(14px) saturate(150%) brightness(.96);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), rgba(0,0,0,.86) calc(100% - 50px), rgba(0,0,0,.62) calc(100% - 36px), rgba(0,0,0,.36) calc(100% - 22px), rgba(0,0,0,.14) calc(100% - 10px), transparent);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), rgba(0,0,0,.86) calc(100% - 50px), rgba(0,0,0,.62) calc(100% - 36px), rgba(0,0,0,.36) calc(100% - 22px), rgba(0,0,0,.14) calc(100% - 10px), transparent);
}
.lens-ok .sb-g { -webkit-backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%) brightness(.96); backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%) brightness(.96); }
:root[data-theme="dark"] .sb-g { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); background: linear-gradient(to bottom, rgb(17,19,22) 0, rgba(17,19,22,.97) 22%, rgba(17,19,22,.82) 42%, rgba(18,20,23,.55) 64%, rgba(18,20,23,.3) 84%, rgba(18,20,23,.22)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-g { background: linear-gradient(to bottom, rgb(17,19,22) 0, rgba(17,19,22,.97) 22%, rgba(17,19,22,.82) 42%, rgba(18,20,23,.55) 64%, rgba(18,20,23,.3) 84%, rgba(18,20,23,.22)); } }
:root[data-theme="dark"] .lens-ok .sb-g { -webkit-backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%); backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-g { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
  :root:not([data-theme="light"]) .lens-ok .sb-g { -webkit-backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%); backdrop-filter: url(#sbLens) blur(1.5px) saturate(150%); } }
/* small mono text would only look broken through the lens, so it fades out as it slides under the bar */
@supports (animation-timeline: view()) {
  .mono-fade { animation: mono-out linear forwards; animation-timeline: view(block 110px 0px); animation-range: exit 0% exit 100%; }
}
@keyframes mono-out { 0% { opacity: 1; } 55%, 100% { opacity: 0; } }
@media (prefers-reduced-transparency: reduce) { .sb-g, .lens-ok .sb-g { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 760px) {
  .stick-bar {
    flex-direction: column;
    gap: 4px;
    padding: 16px 80px 16px 0;
  }
  .stick-t {
    font-size: 12px;
    white-space: normal;
    line-height: 1.15;
  }
  .stick-d { font-size: 12px; }
}

/* ------ Intro: name, Hello screen, scroll-linked hero ------ */
.panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.panel > .wrap { width: 100%; }
.name { font-size: clamp(28px, calc((100vw - 48px) / 9), 96px); }   /* 'Raffaele Anile' is ~8.6em wide */
.hb-1 { font-size: clamp(40px,7.5vw,108px); margin-bottom: 28px; }
.hb-2 {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
}
.hero-role {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hello-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  align-items: end;
}
.hello-grid .me { order: -1; }
.hello-grid .hb-1 { font-size: clamp(40px,6.2vw,92px); }
.hb-3 {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
}
.me {
  margin: 0;
  background: var(--k-card);
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 460/586;
  display: flex;
  align-items: flex-end;
}
.me img {
  width: 100%;
  height: auto;
  display: block;
}
.hero.scrolly { height: 250svh; position: relative; }
.hero.scrolly .hero-stick {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.hero.scrolly .panel {
  position: absolute;
  inset: 0;
  min-height: 0;
}
.hero.scrolly #pHello { pointer-events: none; }   /* nothing to click on Hello; the name panel underneath stays clickable */
.hero.scrolly #pName > .wrap, .hero.scrolly .hello-grid > *, .hero.scrolly .hb-1, .hero.scrolly .hb-2, .hero.scrolly .hb-3 { will-change: transform,opacity; }
.hb-1 .hc {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .14em .02em .1em;
  margin: -.14em -.02em -.1em;
}
.snap-pt {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  display: none;
}
.hero.scrolly .snap-pt { display: block; }
.hero.scrolly .snap-hello { top: calc(150svh * .82); }
.hb-1 .hc > span { display: inline-block; transform: translateY(125%); }
html.magnet-native { scroll-snap-type: y proximity; }
html.magnet-native .hero.scrolly .snap-pt { scroll-snap-align: start; }
html.magnet-native .hero.scrolly .snap-hello { scroll-snap-stop: always; }
html.magnet-native #s01 { scroll-snap-align: start; }
.interests {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 62ch;
}
.interests .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 8px;
  border-radius: 999px;
  background: var(--chip);
  box-shadow: 0 0 0 1px var(--line);
}
.interests .ic {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--d-ink);
}
.interests .ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.interests .chip span:last-child { font-size: 13px; }
.interests .more {
  align-self: center;
  margin-left: 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--soft);
}
@media (max-width: 760px) {
  .hero-role { font-size: 12px; margin-top: 16px; }
  .hello-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .hello-text { min-width: 0; }
  .hello-grid .me { width: 132px; }
  .hb-3 { font-size: 14px; margin-top: 16px; }
  .interests { margin: 16px 0 0; gap: 6px; max-width: none; }   /* wraps onto a few lines, nothing to swipe */
  .interests .chip { gap: 6px; padding: 3px 12px 3px 6px; }
  .interests .ic { width: 22px; height: 22px; }
  .interests .chip span:last-child { font-size: 12px; }
  .interests .more { margin-left: 4px; font-size: 12px; }
}

@media (max-width: 760px) and (max-height: 700px) {   /* short phones: everything has to fit above the chapter bubble */
  .hello-grid { gap: 14px; }
  .hello-grid .me { width: 84px; }
  .hb-3 { margin-top: 10px; }
  .interests { margin-top: 12px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  .hello-grid .hb-1 { font-size: 34px; }
  .hello-grid .hb-2 { font-size: 14px; }
  .hb-3 { font-size: 12.5px; line-height: 1.5; }
  .interests .chip { padding: 2px 10px 2px 5px; }
  .interests .ic { width: 20px; height: 20px; }
}

/* ------ Fixed UI: light switch and chapter bubble ------ */
.theme-switch {
  position: fixed;
  top: max(14px,env(safe-area-inset-top));
  right: max(14px,env(safe-area-inset-right));
  z-index: 22;
  border: 0;
  background: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 999px;
}
.ts-track {
  display: block;
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: #E3E3DF;
  box-shadow: inset 0 0 0 1px rgba(27,28,30,.12);
  transition: background .25s;
}
.ts-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .26s cubic-bezier(.3,1.2,.5,1),background .25s;
}
.bulb { overflow: visible; }
.bulb .glass {
  fill: #F2C230;
  stroke: #8A6A00;
  stroke-width: 1.3;
  transition: fill .3s,stroke .3s;
}
.bulb .base {
  fill: none;
  stroke: #5C5E63;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.bulb .rays {
  stroke: #E0A800;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: opacity .3s;
}
.theme-switch[aria-checked="true"] .ts-track { background: #3A3B3F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(24px); background: #1E1F22; }
.theme-switch[aria-checked="true"] .bulb .glass { fill: none; stroke: #A7A9AD; }
.theme-switch[aria-checked="true"] .bulb .base { stroke: #A7A9AD; }
.theme-switch[aria-checked="true"] .bulb .rays { opacity: 0; }
.theme-switch:active .ts-knob { width: 30px; }
.theme-switch[aria-checked="true"]:active .ts-knob { transform: translateX(20px); }
/* the highlight is a second copy of the labels, already light, clipped to the active chapter:
   pill and label colour move as one */
.ch-top {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(4px 100% 4px 0 round 999px);
  transition: background-color .38s var(--ease-move),opacity .3s;   /* the clip itself is moved by script, like a drop */
}
.ch-top span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  font-family: var(--display);
  font-stretch: 112%;
  letter-spacing: .005em;
  font-size: 13px;
  font-weight: 640;
  white-space: nowrap;
  color: var(--bg);
}
.chapters a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--display);
  font-stretch: 112%;
  letter-spacing: .005em;
  font-size: 13px;
  font-weight: 640;
  white-space: nowrap;
}
.chapters a::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.chapters {
  position: fixed;
  left: 50%;
  bottom: max(18px,env(safe-area-inset-bottom));
  z-index: 21;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  /* liquid glass (a web approximation of Apple's material, not Apple's own): clear, lightly blurred and very
     saturated, with a bright rim and a highlight (::before / ::after). Where the browser can (Chromium), the
     backdrop also bends along the rim like a lens: site.js builds the displacement map for the bubble's size. */
  isolation: isolate;
  background: var(--scrim);
  background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04)),color-mix(in srgb,var(--bg) 12%,transparent);
  -webkit-backdrop-filter: blur(7px) saturate(190%) contrast(1.06) brightness(1.04);
  backdrop-filter: blur(7px) saturate(190%) contrast(1.06) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.22),inset -1px 0 0 rgba(255,255,255,.22),0 0 0 .5px rgba(0,0,0,.08),0 10px 34px rgba(0,0,0,.16);
  opacity: 0;
  transform: translate(-50%,14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s;
}
.chapters::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 140% at 18% -30%,rgba(255,255,255,.5),transparent 42%),linear-gradient(90deg,rgba(255,255,255,.16),transparent 30%,transparent 70%,rgba(255,255,255,.12));
}
.chapters::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.chapters.lens-ok { -webkit-backdrop-filter: url(#chLens) blur(2px) saturate(190%) contrast(1.06) brightness(1.04); backdrop-filter: url(#chLens) blur(2px) saturate(190%) contrast(1.06) brightness(1.04); }
:root[data-theme="dark"] .chapters { background: linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),rgba(16,18,21,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(255,255,255,.08),0 12px 38px rgba(0,0,0,.45); }
:root[data-theme="dark"] .chapters::before { background: radial-gradient(120% 140% at 18% -30%,rgba(255,255,255,.22),transparent 42%),linear-gradient(90deg,rgba(255,255,255,.07),transparent 30%,transparent 70%,rgba(255,255,255,.05)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chapters { background: linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),rgba(16,18,21,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(255,255,255,.08),0 12px 38px rgba(0,0,0,.45); }
  :root:not([data-theme="light"]) .chapters::before { background: radial-gradient(120% 140% at 18% -30%,rgba(255,255,255,.22),transparent 42%),linear-gradient(90deg,rgba(255,255,255,.07),transparent 30%,transparent 70%,rgba(255,255,255,.05)); }
}
@media (prefers-reduced-transparency: reduce) {
  .chapters, .chapters.lens-ok { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.chapters.show {
  opacity: 1;
  transform: translate(-50%,0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s;
}
/* a soft glow under the active chapter, in its colour: it slides with the pill, swells a little on arrival, then rests */
@property --gc { syntax: '<color>'; inherits: false; initial-value: transparent; }
.ch-glow-pos {
  position: fixed;
  left: 0;
  bottom: 0;
  width: min(52vw,720px);
  height: 34dvh;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;   /* its position follows the pill, by script */
}
.ch-glow-pos.show { opacity: 1; }
.ch-glow {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse 55% 100% at 50% 118%,color-mix(in srgb,var(--gc) 15%,transparent) 0%,color-mix(in srgb,var(--gc) 8%,transparent) 38%,color-mix(in srgb,var(--gc) 3%,transparent) 62%,transparent 82%);
  transition: --gc .7s var(--ease-out) .15s;
}
@media (max-width: 760px) {
  .chapters a, .ch-top span { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 359px) {
  .chapters a, .ch-top span { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-knob, .ts-track { transition: none; }
}

/* ------ Work: companies, logos, project tiles ------ */
.media {
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--chip);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pill {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--chip);
  border-radius: 999px;
  padding: 4px 12px;
}
.co-group { margin-top: 96px; }
.co-group:first-child { margin-top: 56px; }
.co-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.co-name { font-size: clamp(18px, calc((100vw - 48px) / 14), 38px); line-height: 1; }
.co-years {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}
.co-role .pill { margin: 0 0 0 8px; vertical-align: 1px; }
.odo { display: inline-flex; }
.odo-d {
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
}
.odo-col {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(.2,.75,.15,1);
  transition-delay: calc(200ms + var(--i) * 90ms);
}
.odo-col span { height: 1.2em; }
.in .odo-col { transform: translateY(calc(var(--d) * -1.2em)); }
/* the year only shows once it starts rolling, so it never reads "0000" at rest */
.odo-d { opacity: 0; transition: opacity .35s ease-out calc(200ms + var(--i) * 90ms); }
.in .odo-d { opacity: 1; }
.now {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s .7s,transform .5s .7s;
}
.in .now { opacity: 1; transform: none; }
.co-role {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--muted);
  max-width: 62ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s .35s,transform .6s .35s cubic-bezier(.16,1,.3,1);
}
.in .co-role { opacity: 1; transform: none; }
.tile .fx {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s,transform .7s cubic-bezier(.16,1,.3,1);
}
.tile .fx:nth-child(1) { transition-delay: .12s; }
.tile .fx:nth-child(2) { transition-delay: .2s; }
.tile .fx:nth-child(3) { transition-delay: .28s; }
.tile .fx:nth-child(4) { transition-delay: .36s; }
.tile.in .fx { opacity: 1; transform: none; }
.sub-title { font-size: clamp(18px,2.2vw,28px); margin-bottom: 8px; }
.sub-lede {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tile:hover { transform: translateY(-3px); }
.tile:active { transform: scale(.99); }
.tile .media { aspect-ratio: 16/10; margin-bottom: 16px; border-radius: 8px; }
.tile.wide { grid-column: 1 / -1; }
.tile.wide .media { aspect-ratio: 21/9; }
.tile .media img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.tile:hover .media img { transform: scale(1.03); }
.tile-meta { padding: 0 8px; }
.tile-co {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tile-name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}
.tile.wide .tile-name { font-size: 22px; }
.tile-lead {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 60ch;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tags span {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
}
.viewer-intro .tile-co { margin: 0; }
.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--card);
  border-radius: 22px;
  padding: 16px 16px 20px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.tile-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: inherit;
  cursor: pointer;
}
.tile-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.co-head.has-logo {
  grid-template-columns: 1fr auto;
  grid-template-areas: "name logo" "years logo" "role role";
  align-items: center;
  row-gap: 8px;
}
.has-logo .co-name { grid-area: name; align-self: end; }
.has-logo .co-years { grid-area: years; align-self: start; }
.has-logo .co-role { grid-area: role; }
.co-logo {
  grid-area: logo;
  justify-self: end;
  align-self: center;
  display: block;
  width: var(--lw);
  height: var(--lh);
  color: var(--muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s .25s,transform .6s .25s cubic-bezier(.16,1,.3,1);
}
.co-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}
.in .co-logo { opacity: 1; transform: none; }
.co-banner {
  margin: 0;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s .2s,transform .7s .2s cubic-bezier(.16,1,.3,1);
}
.co-banner.in { opacity: 1; transform: none; }
.cb-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}
.co-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21/9;
  object-fit: cover;
  object-position: 50% 8%;
  background: var(--k-card);
}
.cb-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,12,.42);
  pointer-events: none;
}
.cb-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 66%;
  width: auto;
  transform: translate(-50%,-50%);
  color: #fff;
  z-index: 1;
  pointer-events: none;
}
.co-banner figcaption {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .tile.wide .media { aspect-ratio: 16/10; }
  .co-logo { width: calc(var(--lw) * .62); height: calc(var(--lh) * .62); }
  .cb-frame { border-radius: 14px; }
}
@media (hover: none) {
  .tile:hover { transform: none; }
  .tile:hover .media img { transform: none; }
}


/* ------ Project viewer ------ */
dialog.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: contain;
}
dialog.viewer::backdrop { background: rgba(0,0,0,.4); opacity: 0; transition: opacity .16s ease-out; }
dialog.viewer.on::backdrop { opacity: 1; transition: opacity .28s var(--ease-out); }
dialog.viewer { opacity: 0; transition: opacity .16s ease-out; }
dialog.viewer.on { opacity: 1; transition: opacity .22s var(--ease-out); }
.viewer-body { transform: translateY(24px); transition: transform .16s ease-out; }
.on .viewer-body { transform: none; transition: transform .32s var(--ease-out); }
/* a very soft magenta glow rising from the bottom of the screen, just after the page arrives; it sits behind the images */
.viewer-glow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60dvh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 100% at 50% 100%,rgba(166,61,101,.18),transparent 72%);
  background: radial-gradient(ellipse 75% 100% at 50% 100%,color-mix(in srgb,var(--m) 18%,transparent),transparent 72%);
  opacity: 0;
  transition: opacity .16s ease-out;
}
.on .viewer-glow { opacity: 1; transition: opacity .9s var(--ease-out) .12s; }
.viewer-body { position: relative; z-index: 1; }
.viewer-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer-bar h2 { font-size: 16px; }
.viewer-intro {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  align-items: start;
  margin: 8px 0 32px;
}
.viewer-intro p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 60ch;
}
.gallery { columns: 2; column-gap: 16px; }
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 0 0 16px;
  break-inside: avoid;
  background: var(--k-card);
}
.gallery img.solo { column-span: all; }
.gal-h {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.viewer-copy {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 999px;
  border: 0;
  background: var(--k-card);
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.viewer-close {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  min-height: 44px;
}
.viewer-body {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px 64px;
  padding-bottom: 120px;
}
.viewer-actions {
  align-items: center;
  position: fixed;
  left: 50%;
  bottom: max(18px,env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line),0 8px 30px rgba(0,0,0,.08);
}
.viewer-actions .va {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: 600 13px/1 var(--mono);
  cursor: pointer;
  white-space: nowrap;
  transition: gap .35s cubic-bezier(.16,1,.3,1),padding .35s cubic-bezier(.16,1,.3,1),background .2s,transform .16s var(--ease-out);
}
.viewer-actions .viewer-copy { background: var(--k-card); color: var(--ink); }
.viewer-actions .viewer-close { background: var(--ink); color: var(--bg); }
.va svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.va-ic { display: grid; flex: none; }
.va-ic svg { grid-area: 1 / 1; transition: opacity .2s var(--ease-out),transform .2s var(--ease-out),filter .2s var(--ease-out); }
.va .va-ok, .va.done .va-i { opacity: 0; transform: scale(.8); filter: blur(2px); }
.va.done .va-ok { opacity: 1; transform: none; filter: none; }
.va-l {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s cubic-bezier(.16,1,.3,1),opacity .2s;
}
dialog.viewer:focus { outline: none; }
@media (max-width: 760px) {
  .viewer-intro { grid-template-columns: 1fr; gap: 12px; }
  .gallery { columns: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .viewer-actions .va:hover, .viewer-actions .va:focus-visible, .viewer-actions .va.done { gap: 8px; padding: 0 16px 0 16px; }
  .viewer-actions .va:hover .va-l, .viewer-actions .va:focus-visible .va-l, .viewer-actions .va.done .va-l { max-width: 9em; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-actions .va, .va-l { transition: none; }
  .viewer-body, .on .viewer-body { transform: none; transition: none; }
}

/* ------ Method: workflow diagram and skills ------ */
.flow { margin-top: 96px; }
.flow-title { font-size: clamp(18px,2.2vw,28px); margin-bottom: 8px; }
.flow-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}
.flow-svg {
  width: 100%;
  height: auto;
  display: block;
}
.skill {
  background: var(--card);
  border-radius: 18px;
  padding: 24px 24px;
}
.skill h3 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-text);
  margin: 0 0 16px;
}
.skill ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
}
.flow-svg-m {
  display: none;
  width: 100%;
  height: auto;
}
.fit {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: 64px;
  align-items: start;
  margin-top: 112px;
}
.fit-left { position: sticky; top: 120px; }
.fit-q {
  font-size: clamp(20px,3vw,40px);
  line-height: 1.1;
  color: var(--c-text);
  margin: 0;
}
.fq-l { display: block; white-space: nowrap; }
@media (max-width: 480px) { .fq-l { white-space: normal; text-wrap: balance; } }
.fit-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ft-card {
  background: var(--c-card);
  border-radius: 22px;
  padding: 24px 24px 24px;
}
.ft-card.soft { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-card); }
.ft-card h3 {
  font-size: 18px;
  color: var(--c-text);
  margin: 0 0 16px;
}
.ft-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}
.ft-card li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: color .3s;
}
.ft-card li.on { color: var(--ink); }
.ft-tick {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--c-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: calc(24 - 24 * var(--p,0));
}
.ft-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ft-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 12px 8px 8px;
  font-size: 13px;
  white-space: nowrap;
}
.ft-tool .ic {
  display: inline-flex;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  flex: none;
}
.ft-tool .ic img { display: block; padding: 3px; }
.ft-tool .ic.full img { padding: 0; }
.fit-tag {
  font-size: clamp(18px,2.2vw,24px);
  line-height: 1.2;
  margin: 40px 0 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s,transform .6s cubic-bezier(.16,1,.3,1);
}
.fit-tag.in { opacity: 1; transform: none; }
.flow-svg * { stroke-linejoin: round; }
/* the diagrams load after the page (img/workflow*.svg); the slot keeps their exact size meanwhile */
.flow-slot { width: 100%; }
.flow-slot-m { display: none; }
@media (max-width: 760px) {
  .flow-svg { display: none; }
  .flow-svg-m { display: block; }
  .flow-slot-d { display: none; }
  .flow-slot-m { display: block; }
  .fit {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 80px;
  }
  .fit-left { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-tick { stroke-dashoffset: 0; }
  .ft-card li { color: var(--ink); }
}

/* ------ After hours: E8 and Benelli ------ */
.see {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
}
.e8-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.e8-head h3 { font-size: clamp(40px,6vw,76px); color: var(--accent); }
.e8-head p {
  font-size: 16px;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.65;
}
.shot {
  border-radius: 22px;
  overflow: hidden;
  background: #0d0e10;
}
.shot img { width: 100%; height: auto; }
.story {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 64px;
}
.story figure { margin: 0; }
.story .shot {
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story .shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story h4 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-text);
  margin: 16px 0 8px;
}
.story p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.touch { margin-top: 112px; }
.touch .big { font-size: clamp(24px,3.8vw,46px); margin-bottom: 24px; }
.touch .intro {
  font-size: 16px;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.65;
  margin-bottom: 32px;
}
.details { margin-top: 112px; }
.details-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 16px;
}
.dlist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: d;
}
.dlist li {
  counter-increment: d;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.bn {
  margin-top: 160px;
  padding-top: 112px;
  border-top: 1px solid var(--line);
}
.shot.light { background: #fff; }
.brief {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 40px;
}
.brief > div {
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
}
.brief h4 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-text);
  margin: 0 0 12px;
}
.brief p, .brief li { font-size: 14px; line-height: 1.55; }
.brief ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.brief li + li { margin-top: 8px; }
.bn > .see { margin-top: 28px; font-size: 14px; }
.dlist li:last-child { border-bottom: 1px solid var(--line); }
.dlist li::before {
  content: counter(d,decimal-leading-zero);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12px;
  color: var(--accent-text);
  padding-top: 2px;
}
.stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 2200/1122;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 52.5% 51.5%;
  will-change: transform,opacity;
}
.caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 16px 0 32px;
  min-height: 24px;
}
.caption .txt { font-size: 14px; }
.caption .txt i { color: var(--muted); }
.caption .count {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12px;
  color: var(--accent-text);
  white-space: nowrap;
}
.cal {
  position: relative;
  height: 96px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.cal .rail2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
}
.cal .fill {
  position: absolute;
  left: 0;
  top: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  width: var(--p);
}
.cal .ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 22px;
}
.cal .tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 8px;
  background: var(--ink);
  opacity: .5;
  transform-origin: top;
}
.cal .tick.major {
  height: 16px;
  opacity: .85;
  width: 1.5px;
}
.cal .labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  height: 16px;
  font-size: 11px;
  color: var(--soft);
}
.cal .labels span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.cal .labels span:first-child { transform: none; }
.cal .labels span:last-child { transform: translateX(-100%); }
.cal .labels span.on { color: var(--ink); font-weight: 700; }
.jaws {
  position: absolute;
  top: 10px;
  left: var(--p);
  width: 0;
  height: 58px;
  pointer-events: none;
}
.jaw {
  position: absolute;
  top: 0;
  width: 7px;
  height: 58px;
  background: var(--accent);
  transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
.jaw.l {
  right: 0;
  border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0,100% 0,100% 100%,0 72%);
}
.jaw.r {
  left: 0;
  border-radius: 0 4px 4px 0;
  clip-path: polygon(0 0,100% 0,100% 72%,0 100%);
}
.cal.drag .jaw.l { transform: translateX(-5px); }
.cal.drag .jaw.r { transform: translateX(5px); }
.bubble {
  position: absolute;
  top: -24px;
  left: var(--p);
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.cal input {
  position: absolute;
  left: -12px;
  top: 0;
  height: 72px;
  width: calc(100% + 24px);
  opacity: 0;
  cursor: grab;
  margin: 0;
}
.cal.drag input { cursor: grabbing; }
.cal input:focus-visible ~ .jaws .jaw { box-shadow: 0 0 0 3px var(--bg),0 0 0 5px var(--ink); }
.bn-rail { margin-top: 12px; }
.bn-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bn-strip {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  padding: 0 max(40px, calc((100vw - 1040px) / 2 + 40px));
  scroll-padding: 0 max(40px, calc((100vw - 1040px) / 2 + 40px));
  overscroll-behavior-x: contain;
}
.bn-strip::-webkit-scrollbar { display: none; }
.bn-strip.drag { cursor: grabbing; scroll-snap-type: none; }
.bn-strip figure {
  flex: 0 0 min(70vw,820px);
  margin: 0;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-select: none;
}
.bn-strip img { pointer-events: none; -webkit-user-drag: none; }
.bn-strip figcaption {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 10px;
}
.bn-bar {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 24px;
}
.bn-bar i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 5px;
  width: calc(100% / 3);
  border-radius: 3px;
  background: var(--accent);
  transform: translateX(calc(var(--p, 0) * 200%));
  will-change: transform;
}
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; gap: 32px; }
  .details-row { grid-template-columns: 1fr; }
  .brief { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bn { margin-top: 96px; padding-top: 80px; }
  .e8-head { grid-template-columns: 1fr; gap: 12px; }
  .bn-strip { padding: 0 22px; scroll-padding: 0 22px; }
  .bn-strip figure { flex-basis: 86vw; }
}

/* ------ Contact and footer ------ */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.contact-links a {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
}
.contact-links a:hover { filter: brightness(.96); }
.socials a { transition: color .15s ease; }
.socials a:hover { color: var(--ink); }
.bye {
  font-size: clamp(80px,17vw,250px);
  color: var(--ghost);
  margin-top: 112px;
  line-height: .85;
  white-space: nowrap;
}
.fine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 28px;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  row-gap: 0;
  margin-top: 16px;
}
.contact-links a.cv {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--bg);
}
.contact-links a.cv svg { width: 16px; height: 16px; }
@media (hover: none) {
  .contact-links a:hover { filter: none; }
}

/* ------ Shared rules: minimum sizes, touch targets, radius scale, hover only with a mouse ------ */
.tile-co, .tags span, .pill, .stick-d, .cal .labels, .bubble { font-size: 12.5px; }
.socials a, .bn > .see {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.skill, .brief > div { border-radius: 22px; }
.media, .gallery img, .viewer-body img, .skip { border-radius: 14px; }
h1, h2, h3, h4, .display, .sec-title, .fit-tag { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
  .odo-col { transition: none !important; }
  .odo-d { opacity: 1 !important; transition: none !important; }
  .tile, .tile .media img, .jaw { transition: none; }
}

/* ------ Text motion: letters, lines and blocks that rise into view ------ */
.rv-c {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 28ms);
}
.in .rv-c { transform: none; }
.rv {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .14em .04em .1em;
  margin: -.14em -.04em -.1em;
}
.rv-w { white-space: nowrap; }
.rl {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .14em .04em .1em;
  margin: -.14em -.04em -.1em;
}
.rl-i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--l,0) * 90ms);
}
.in .rl-i { transform: none; }
.up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s,transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--k,0) * 70ms + 80ms);
}
.up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rl-i { transform: none; transition: none; }
}

/* ------ Press feedback: buttons give slightly under the finger ------ */
.contact-links a { transition: transform .16s var(--ease-out),filter .15s ease; }
.chapters a { transition: transform .16s var(--ease-out); }
.viewer-actions .va:active, .contact-links a:active, .chapters a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .contact-links a, .chapters a { transition: none; }
}

/* ------ Reduced motion: nothing moves, but things still fade in and out ------ */
@media (prefers-reduced-motion: reduce) {
  .rv-c { transform: none !important; transition: none !important; }
  .up, .tile .fx, .co-role, .co-logo, .co-banner, .fit-tag, .now { transform: none !important; transition: opacity .4s ease !important; }
  .stick-bar { transform: none; transition: opacity .2s ease; }
  .chapters, .chapters.show { transform: translate(-50%,0); }
  .ch-glow-pos { transition: opacity .3s; }
  .chapters { transition: opacity .3s ease,visibility 0s linear .3s; }
  .chapters.show { transition: opacity .3s ease,visibility 0s; }
  .ch-top { transition: opacity .3s ease,background-color .3s ease; }
  .va-ic svg { transform: none !important; filter: none !important; }
}

/* ------ Icons beside the phone number and the social links (Phosphor, MIT) ------ */
.ic { width: 16px; height: 16px; flex: none; }
.socials a { gap: 6px; }
.contact-links a { gap: 10px; display: inline-flex; align-items: center; }

/* Benelli Tornado 2030: title on its own row so it stays on one line */
.bn .e8-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bn .e8-head h3 { font-size: clamp(24px, calc((100vw - 48px) / 13.4), 64px); }

/* ------ Background: one continuous, very soft light along the page edges ------ */
/* The colours follow the sections (stops are written by site.js from where each section sits) and fade into
   each other over most of a screen, so there is no spot brighter than the rest. The light enters from both
   edges; the stronger side alternates from one section to the next. It drifts a little slower than the page. */
.page-glow { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-glow i { position: absolute; left: 0; right: 0; top: -12vh; bottom: -12vh; }   /* overhangs both ends so the drift never uncovers an edge */
.page-glow .pg-l { -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.05) 44%, transparent 52%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.72) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.05) 44%, transparent 52%); }
.page-glow .pg-r { -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.72) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.05) 44%, transparent 52%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.72) 10%, rgba(0,0,0,.42) 22%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.05) 44%, transparent 52%); }
:root { --gs-hi: 15%; --gs-lo: 7%; }
:root[data-theme="dark"] { --gs-hi: 12%; --gs-lo: 6%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gs-hi: 12%; --gs-lo: 6%; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-glow i { animation: glow-drift linear both; animation-timeline: scroll(root); }
  }
}
@keyframes glow-drift { from { transform: translateY(10vh); } to { transform: translateY(-10vh); } }

/* the workflow diagram sits on a dotted board */
.flow-board {
  border-radius: 22px;
  padding: 28px 32px;
  background-color: color-mix(in srgb, var(--bg) 60%, #fff 40%);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.3px);
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="dark"] .flow-board { background-color: rgba(255,255,255,.02); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flow-board { background-color: rgba(255,255,255,.02); } }
@media (max-width: 760px) { .flow-board { padding: 16px 12px; border-radius: 16px; } }

/* My design approach: five hand-drawn concepts under the Method title. They "boil" like the workflow
   drawings (two frames on a beat) and each plays its own little animation, once on arrival, then in turns. */
.approach { margin: 8px 0 0; }
.cp-cap { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.cp-cap::before, .cp-cap::after { content: ''; flex: 1; border-top: 1px dashed var(--line); }
.cp-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; color: var(--d-ink, var(--ink)); }
.cp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.cp-ic { width: 96px; height: 96px; display: block; }
.cp-ic svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cp-l { font-size: 13px; line-height: 1.4; color: var(--ink); white-space: nowrap; }
@media (max-width: 760px) {
  .cp-row { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 22px; gap: 8px; }
  .cp-row .cp { grid-column: span 2; } .cp-row .cp:nth-child(4) { grid-column: 2 / span 2; }
  .cp-ic { width: 66px; height: 66px; }
  .cp-l { font-size: 11px; }
}
.cp-row .f2 { visibility: hidden; }
.cp-row.live.bt0 .q0 .f1, .cp-row.live.bt1 .q1 .f1, .cp-row.live.bt2 .q2 .f1 { visibility: hidden; }
.cp-row.live.bt0 .q0 .f2, .cp-row.live.bt1 .q1 .f2, .cp-row.live.bt2 .q2 .f2 { visibility: visible; }
.cp .p-fea { transform-box: view-box; transform-origin: 57.6px 70.6px; }
.cp .p-zoom { transform-box: view-box; transform-origin: 54.7px 72px; }
.cp.mi .p-fea { animation: cpFall 2.2s cubic-bezier(.45,.05,.35,1) both; }
.cp.mi .p-trail { animation: cpFade 1.6s ease both; }
.cp.mi .p-spiral { animation: cpDraw 1.8s cubic-bezier(.3,.7,.4,1) both; }
.cp.mi .p-ring { animation: cpPulse .5s ease both; }
.cp.mi .p-lead { animation: cpDraw .35s ease .25s both; }
.cp.mi .p-zoom { animation: cpZoom .9s cubic-bezier(.2,.9,.3,1.2) .45s both; }
.cp.mi .p-flow0 { animation: cpDraw 1.1s ease both; } .cp.mi .p-flow1 { animation: cpDraw 1.1s ease .15s both; }
.cp.mi .p-flow2 { animation: cpDraw 1.1s ease .3s both; } .cp.mi .p-flow3 { animation: cpDraw 1.1s ease .45s both; }
.cp.mi .p-deco { animation: cpShake .6s linear both; }
.cp.mi .p-strike { animation: cpDraw .45s ease .6s both; }
.cp.mi .p-arc { animation: cpDraw .9s cubic-bezier(.3,.7,.4,1) 1.15s both; }
@keyframes cpDraw { 0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; } 100% { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes cpFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cpFall { 0% { opacity: 0; transform: translate(-6px, -26px) rotate(16deg); } 18% { opacity: 1; } 40% { transform: translate(6px, -15px) rotate(-12deg); } 64% { transform: translate(-4px, -6px) rotate(8deg); } 84% { transform: translate(1px, -1px) rotate(-3deg); } 100% { transform: none; } }
@keyframes cpPulse { 0% { transform: none; } 50% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes cpZoom { 0% { opacity: 0; transform: scale(.25); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: none; } }
@keyframes cpShake { 0%, 100% { transform: none; } 20% { transform: translate(-1px, 0) rotate(-1deg); } 40% { transform: translate(1px, 0) rotate(1deg); } 60% { transform: translate(-1px, 0); } 80% { transform: translate(1px, 0); } }
.cp .p-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.cp .p-deco { transform-box: fill-box; transform-origin: 50% 50%; }
.cp.wait .p-fea, .cp.wait .p-trail, .cp.wait .p-spiral, .cp.wait .p-zoom, .cp.wait .p-lead, .cp.wait .p-strike, .cp.wait .p-arc, .cp.wait [class*="p-flow"] { opacity: 0; }   /* waiting for its turn on arrival */
@media (prefers-reduced-motion: reduce) { .cp.mi * { animation: none !important; } }

/* process photos pinned next to their step in the workflow diagram: tiny square polaroids, taped on as you scroll */
.flow-pins { position: relative; }
.flow-pins-m { display: none; }
@media (max-width: 760px) { .flow-pins-d { display: none; } .flow-pins-m { display: block; } }
.pin { position: absolute; display: block; background: #fff; padding: 3px 3px 7px; border-radius: 1.5px; box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08); transform: rotate(var(--r)); opacity: 0; cursor: zoom-in; transition: transform .25s, box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.flow-pins-m .pin { padding: 2px 2px 5px; }
.pin img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.pin::before { content: ""; position: absolute; left: 50%; top: -7%; width: 34.5%; height: 15%; background: rgba(236, 228, 205, .78); box-shadow: 0 0 0 .5px rgba(0,0,0,.05); transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(0); transform-origin: left center; z-index: 1; }
.pin.on { opacity: 1; animation: pinStick .62s cubic-bezier(.2, .8, .3, 1) calc(var(--i) * .22s) both; }
.pin.on::before { animation: pinTape .28s ease-out calc(var(--i) * .22s + .42s) both; }
.pin.set { animation: none; opacity: 1; }
.pin.set::before { animation: none; transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(1); }
.pin.set:hover, .pin.set.big { transform: rotate(0deg) scale(2.2); z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
@keyframes pinStick {
  0%   { opacity: 0; transform: translate(-6%, -30%) rotate(calc(var(--r) + 14deg)) scale(1.35); box-shadow: 0 14px 22px rgba(0,0,0,.2); }
  55%  { opacity: 1; transform: rotate(calc(var(--r) - 2deg)) scale(.94); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
  78%  { transform: rotate(calc(var(--r) + .6deg)) scale(1.02); }
  100% { opacity: 1; transform: rotate(var(--r)); box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08); }
}
/* undone (scrolling back up): it peels off and lifts away, quicker than it went on */
.pin.off { animation: pinOff .32s cubic-bezier(.5, 0, .75, 0) both; }
.pin.off::before { transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(1); }
@keyframes pinOff {
  0%   { opacity: 1; transform: rotate(var(--r)); }
  100% { opacity: 0; transform: translate(4%, -24%) rotate(calc(var(--r) - 10deg)) scale(1.18); box-shadow: 0 12px 20px rgba(0,0,0,.18); }
}
@keyframes pinTape { from { transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(0); } to { transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pin { opacity: 1; } .pin::before { transform: translateX(-50%) rotate(calc(var(--r) * -1.4)) scaleX(1); } .pin.on, .pin.on::before { animation: none; } }

/* ------ Work: smaller projects as short horizontal pills, the graphics as a collapsed chapter ------ */
.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pp, .gfx-b { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 76px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--card); color: var(--ink); text-align: left; }
.pp { transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .6s, translate .7s cubic-bezier(.16,1,.3,1); opacity: 0; translate: 0 12px; }
.pp.in { opacity: 1; translate: 0 0; }
.pp:hover { transform: translateY(-2px); }
.pp:active { transform: scale(.985); }
.pp-t { flex: 0 0 auto; width: 92px; height: 60px; border-radius: 999px; overflow: hidden; }
.pp-t img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.pp:hover .pp-t img { transform: scale(1.06); }
.pp-m { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-y { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pp-n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; line-height: 1.2; }
.pp-l { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ar { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pp:hover .pp-ar { transform: translateX(3px); }
.pp .tile-open:focus-visible { outline-offset: 2px; }
.gfx { margin-top: 10px; border-radius: 38px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); transition: background-color .3s, opacity .6s, translate .7s cubic-bezier(.16,1,.3,1); opacity: 0; translate: 0 12px; }
.gfx.in { opacity: 1; translate: 0 0; }
.gfx.open { background: var(--card); }
.gfx-b { width: 100%; border: 0; font: inherit; background: transparent; cursor: pointer; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.gfx-b:hover { transform: translateY(-2px); }
.gfx-b:active { transform: scale(.99); }
.gfx-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gfx-t { position: relative; flex: 0 0 auto; width: 132px; height: 60px; }
.gfx-t img { position: absolute; top: 0; left: calc(var(--k) * 24px); width: 60px; height: 60px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--bg); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.gfx-b:hover .gfx-t img { transform: translateX(calc(var(--k) * 4px)); }
.gfx-plus { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }
.gfx-plus::before, .gfx-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--bg); transition: transform .3s cubic-bezier(.23,1,.32,1); }
.gfx-plus::after { transform: rotate(90deg); }
.gfx.open .gfx-plus::after { transform: rotate(0deg); }
.gfx-s { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.77,0,.175,1); }
.gfx.open .gfx-s { grid-template-rows: 1fr; }
.gfx-in { min-height: 0; overflow: hidden; }
.gfx-si { display: flex; gap: 10px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
.gfx-si::-webkit-scrollbar { display: none; }
.gfx.open .gfx-si { padding: 4px 20px 20px; }
.gfx-si figure { position: relative; margin: 0; flex: 0 0 auto; scroll-snap-align: start; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s cubic-bezier(.23,1,.32,1); }
.gfx.open .gfx-si figure { opacity: 1; transform: none; }
.gfx.open .gfx-si figure:nth-child(2) { transition-delay: .05s; } .gfx.open .gfx-si figure:nth-child(3) { transition-delay: .1s; } .gfx.open .gfx-si figure:nth-child(4) { transition-delay: .15s; } .gfx.open .gfx-si figure:nth-child(5) { transition-delay: .2s; } .gfx.open .gfx-si figure:nth-child(6) { transition-delay: .25s; }
.gfx-si img { height: 160px; width: auto; display: block; border-radius: 10px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.gfx-si figure:hover img { transform: translateY(-3px); }
.gfx-si figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.gfx-si .tile-open { border-radius: 10px; }
.press { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.press-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.press-l { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.press-l a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; color: var(--m-text); text-decoration: none; }
.press-l a:hover { text-decoration: underline; text-underline-offset: 3px; }
.press-l svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .pills { grid-template-columns: 1fr; gap: 8px; }
  .pp, .gfx-b { gap: 12px; padding: 7px 14px 7px 7px; min-height: 62px; }
  .pp-t { width: 64px; height: 44px; }
  .pp-n { font-size: 14px; }
  .pp-l { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gfx-t { width: 86px; height: 44px; }
  .gfx-t img { width: 44px; height: 44px; left: calc(var(--k) * 14px); }
  .gfx-si img { height: 124px; }
}
@media (prefers-reduced-motion: reduce) { .pp, .gfx { opacity: 1; translate: none; } }

/* ------ After hours: sketchbook ------ */
.sk { margin-top: 160px; padding-top: 112px; border-top: 1px solid var(--line); }
.sk-g { display: flex; flex-direction: column; gap: 12px; }
.sk-r { display: flex; gap: 12px; }
.sk-f { margin: 0; min-width: 0; }
.sk-f img { width: 100%; height: auto; display: block; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.sk-f img:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 1px var(--line); }
/* ------ After hours: made to fit (real fixes on real objects) ------ */
.mf { margin-top: 160px; padding-top: 112px; border-top: 1px solid var(--line); }
.mf-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; background: var(--card); border-radius: 22px; padding: 28px; }
.mf-c + .mf-c { margin-top: 16px; }
.mf-big { grid-template-columns: 1fr; gap: 22px; }
.mf-y { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.mf-n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; margin: 0 0 12px; }
.mf-p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 52ch; }
.mf-h .mf-p { max-width: 66ch; margin-bottom: 0; }
.mf-k { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 16px; color: var(--accent-text); margin: 0 0 12px; }
.mf-st { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 10px; }
.mf-st li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; font-size: 14px; line-height: 1.5; }
.mf-st li::before { content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--accent-text); padding-top: 2px; }
.mf-m { display: flex; gap: 10px; align-items: flex-start; }
.mf-m figure { margin: 0; min-width: 0; }
.mf-m img { width: 100%; height: auto; display: block; border-radius: 12px; }
.mf-m figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; }
.mf-ph { aspect-ratio: 3 / 4; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); display: grid; place-items: center; text-align: center; padding: 10px; }
.mf-ph span { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--accent-text); }
.mf-hero { margin: 0; border-radius: 14px; overflow: hidden; background: #202122; }
.mf-hero img { width: 100%; height: auto; display: block; }
.mf-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; border-top: 1px solid var(--line); padding-top: 22px; }
/* ------ Contact: featured in ------ */
.fi { margin-top: 72px; }
.fi-k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.fi-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
.fi-l li { border-bottom: 1px solid var(--line); }
.fi-l a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 16px 2px; color: var(--ink); text-decoration: none; min-height: 44px; }
.fi-o { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 17px; line-height: 1.2; }
.fi-p { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 4px; }
.fi-l svg { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.23,1,.32,1), stroke .2s; }
.fi-l a:hover svg { transform: translate(2px, -2px); stroke: var(--ink); }
.fi-l a:hover .fi-o { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.fi-l a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) {
  .sk, .mf { margin-top: 96px; padding-top: 80px; }
  .sk-g { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 0 24px 6px; scroll-padding-inline: 24px; gap: 10px; }
  .sk-g::-webkit-scrollbar { display: none; }
  .sk-r { display: contents; }
  .sk-f { flex: 0 0 auto !important; scroll-snap-align: start; }
  .sk-f img { height: 190px; width: auto; }
  .mf-c, .mf-sub { grid-template-columns: 1fr; gap: 18px; }
  .mf-c { padding: 18px; }
  .mf-big { gap: 18px; }
  .fi { margin-top: 56px; }
  .fi-l { grid-template-columns: 1fr; }
}

/* ------ After hours under E8: pills, a placeholder, links out; strips get a full-width scroll bar ------ */
.ah-more { margin-top: 0; }
.ah-more .pills { margin-top: 0; }
.ah-more .gfx { margin-top: 10px; }
.pp-soon { cursor: default; }
.pp-soon:hover { transform: none; }
.pp-ph { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); }
.pp-ph span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.arch { margin-top: 160px; padding-top: 112px; border-top: 1px solid var(--line); }
.arch .sub-title { color: var(--accent-text); }
.ah-more .pills-out { margin-top: 10px; }
.pp-link { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); padding-left: 26px; min-height: 66px; text-decoration: none; }
.pp-link:hover .pp-ar { transform: translate(2px, -2px); }
.pp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp { display: flex; align-items: center; gap: 6px; margin: 0 20px 18px; }
.sp-b { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; padding: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: background-color .2s, opacity .2s, transform .2s; }
.sp-b:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.sp-b:active { transform: scale(.94); }
.sp-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-b[disabled] { opacity: .35; cursor: default; }
.sp-b svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-t { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.sp-t::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--line); }
.sp-t i { position: absolute; top: 50%; left: 0; height: 6px; margin-top: -3px; border-radius: 6px; background: var(--accent); transform: translateX(calc(var(--p, 0) * (100cqw - 100%))); }
.sp-t { container-type: inline-size; }
.gfx-si { cursor: grab; }
.gfx-si.drag { cursor: grabbing; scroll-snap-type: none; }
.gfx-si.drag .tile-open { pointer-events: none; }
.gfx-si img { -webkit-user-drag: none; user-select: none; }
.gfx.open .gfx-si { padding-bottom: 12px; }
dialog.viewer[data-sec="y"] { --accent: var(--y); --accent-text: var(--y-text); --card: var(--y-card); }
@media (max-width: 760px) {
  .arch { margin-top: 96px; padding-top: 80px; }
  .pp-link { padding-left: 20px; min-height: 60px; }
  .sp { margin: 0 14px 14px; }
}

/* ------ Viewer: design principles as three small pillars between the text and the first picture ------ */
.pillars { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: pl; }
.pillars li { counter-increment: pl; background: var(--card); border-radius: 18px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.pillars li::before { content: counter(pl, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--accent-text); margin-bottom: 6px; }
.pl-n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--ink); }
.pl-d { font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 8px; } .pillars li { padding: 14px 16px; } }

/* ------ Viewer: generated pictures carry a small "AI-generated" tag in the corner ------ */
.ai-w { position: relative; display: block; break-inside: avoid; margin: 0 0 16px; }
.ai-w.solo { column-span: all; }
.gallery .ai-w img { margin: 0; display: block; }
.ai-tag { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(10,11,13,.62); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
@media (max-width: 760px) { .ai-tag { right: 8px; bottom: 8px; font-size: 10px; padding: 4px 8px; } }

/* ------ Personal shortcuts: three bubbles that grow out of "Personal", plus the ghost-bubble hint ------ */
.ch-sub { position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px); z-index: 21; display: flex; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.ch-sub.open { pointer-events: auto; }
.ch-sub a {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px;
  font-family: var(--display); font-stretch: 112%; font-weight: 640; font-size: 13px; white-space: nowrap; color: var(--y-text);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04)), color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(9px) saturate(190%); backdrop-filter: blur(9px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.18), 0 0 0 .5px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.14);
  opacity: 0; transform: translate(var(--dx, 0px), 46px) scale(.2);
  transition: transform .32s cubic-bezier(.55,0,.75,.2), opacity .2s .1s, background-color .25s, color .25s;
}
.ch-sub a::after { content: ''; position: absolute; inset: -4px -2px; }
.ch-sub a.on { background: var(--y-text); color: var(--bg); }
.ch-sub a:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.ch-sub.open a { opacity: 1; transform: none; transition: transform .62s cubic-bezier(.3,1.65,.55,1), opacity .18s, background-color .25s, color .25s; }
.ch-sub.open a:nth-child(2) { transition-delay: .06s; } .ch-sub.open a:nth-child(3) { transition-delay: .12s; }
.ch-sub a:nth-child(1) { transition-delay: .08s; } .ch-sub a:nth-child(2) { transition-delay: .04s; }
.ch-sub.open.breathe a { animation: chBreathe 2.8s ease-in-out infinite; }
.ch-sub.open.breathe a:nth-child(2) { animation-delay: -.9s; } .ch-sub.open.breathe a:nth-child(3) { animation-delay: -1.8s; }
@keyframes chBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045, 1.07); } }
.ch-sub a.tap { animation: chTap .45s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes chTap { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
:root[data-theme="dark"] .ch-sub a { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)), rgba(16,18,21,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08), 0 0 0 .5px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-sub a { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)), rgba(16,18,21,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08), 0 0 0 .5px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45); } }
:root[data-theme="dark"] .ch-sub a.on, :root:not([data-theme="light"]) .ch-sub a.on { background: var(--y-text); }
.ch-ghost { position: fixed; z-index: 22; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--y-text); opacity: 0; pointer-events: none; animation: chGhost 1.15s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes chGhost { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--gx), -30px) scale(1.25); } }
@media (max-width: 760px) { .ch-sub a { min-height: 34px; padding: 0 13px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .ch-sub a { transition: opacity .2s !important; transform: none !important; animation: none !important; } .ch-ghost { display: none; } }

/* ------ CV preview in the viewer: the A4 sheet itself, scaled to fit, always light like paper ------ */
.cvv { --bg: #F2F3F4; --paper: #FFFFFF; --ink: #14171A; --muted: #50575F; --line: rgba(20,23,26,.12);
  --m: #A63D65; --m-card: #F4DCE4; --c: #22687A; --c-card: #D8EDF0; --y: #7A5A0E; --y-card: #F3E6C4; --k-card: #E4E7EA;
  margin: 8px auto 24px; width: 100%; max-width: 210mm; }
.cvv *, .cvv *::before, .cvv *::after { margin: 0; padding: 0; box-sizing: border-box; }
.cvv ul { list-style: none; }
.cvv-fit { width: 210mm; transform-origin: top left; }
.cvv .cv-sheet { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.18); border-radius: 4px; }
.cvv .cv-sheet {
  width: 210mm; height: 297mm; overflow: hidden; position: relative; background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 7.9pt; line-height: 1.42;
  padding: 11mm 12mm 8mm; display: flex; flex-direction: column; gap: 3.8mm;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.18);
}
.cvv .cv-d { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 800; letter-spacing: -.005em; }
.cvv a { color: inherit; text-decoration: none; }
.cvv .cv-top { display: grid; grid-template-columns: 31mm 1fr; gap: 6mm; align-items: stretch; }
.cvv .cv-hello { font-size: 7.6pt; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cvv .cv-name { font-size: 28pt; line-height: .92; margin: 1.6mm 0 1.8mm; }
.cvv .cv-role { font-size: 9.4pt; font-weight: 700; }
.cvv .cv-motto { margin-top: 1.6mm; font-size: 8.4pt; color: var(--muted); max-width: 92mm; }
.cvv .cv-contacts { margin-top: 3mm; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .5mm 3.5mm; font-size: 7.6pt; }
.cvv .cv-contacts dt { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 7pt; padding-top: .4mm; }
.cvv .cv-ph { border-radius: 6mm; background: var(--k-card); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.cvv .cv-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; mix-blend-mode: multiply; display: block; }
.cvv .cv-lead { font-size: 8.6pt; line-height: 1.55; max-width: 182mm; }
.cvv .cv-lead b { font-weight: 700; }
.cvv .cv-cols { display: grid; grid-template-columns: 1fr 64mm; gap: 3.8mm; flex: 1; min-height: 0; }
.cvv .cv-k { font-size: 6.8pt; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4mm; }
.cvv .cv-h { font-size: 12pt; margin-bottom: 2.2mm; }
.cvv .cv-card { border-radius: 5mm; padding: 3.8mm 4.4mm; }
.cvv .cv-work { background: var(--m-card); }
.cvv .cv-work .cv-h { color: var(--m); }
.cvv .cv-job { display: grid; grid-template-columns: 17mm 1fr; gap: 0 3mm; padding: 1.7mm 0; border-top: 1px solid rgba(166,61,101,.18); }
.cvv .cv-job:first-of-type { border-top: 0; padding-top: 0; }
.cvv .cv-when { font-size: 7.4pt; color: var(--muted); line-height: 1.45; }
.cvv .cv-when b { display: block; color: var(--m); font-weight: 700; font-size: 7.4pt; }
.cvv .cv-jt { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 800; font-size: 9.6pt; line-height: 1.2; }
.cvv .cv-jt span { font-family: var(--mono); font-weight: 400; font-size: 7.6pt; color: var(--muted); letter-spacing: 0; margin-left: 1.2mm; }
.cvv .cv-job ul { list-style: none; margin-top: .8mm; display: grid; gap: .4mm; }
.cvv .cv-job li { position: relative; padding-left: 3.2mm; }
.cvv .cv-job li::before { content: ""; position: absolute; left: 0; top: 1.9mm; width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--m); opacity: .7; }
.cvv .cv-job li b { font-weight: 700; }
.cvv .cv-side { display: flex; flex-direction: column; gap: 3.8mm; }
.cvv .cv-skills { background: var(--c-card); }
.cvv .cv-skills .cv-h { color: var(--c); }
.cvv .cv-sk { display: grid; grid-template-columns: 15mm 1fr; gap: 2mm; padding: 1.3mm 0; border-top: 1px solid rgba(34,104,122,.18); }
.cvv .cv-sk:first-of-type { border-top: 0; padding-top: 0; }
.cvv .cv-sk p:first-child { font-size: 6.6pt; letter-spacing: .1em; text-transform: uppercase; color: var(--c); font-weight: 700; padding-top: .3mm; }
.cvv .cv-edu { background: var(--paper); }
.cvv .cv-edu .cv-ed { padding: 1.3mm 0; border-top: 1px solid var(--line); }
.cvv .cv-edu .cv-ed:first-of-type { border-top: 0; padding-top: 0; }
.cvv .cv-ed b { display: block; font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 800; font-size: 8.8pt; line-height: 1.25; }
.cvv .cv-ed span { color: var(--muted); font-size: 7.6pt; }
.cvv .cv-press { background: var(--y-card); }
.cvv .cv-press .cv-h { color: var(--y); }
.cvv .cv-press ul { list-style: none; display: grid; gap: .9mm; }
.cvv .cv-press li b { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 800; font-size: 8.4pt; }
.cvv .cv-press li span { color: var(--muted); font-size: 7.4pt; display: block; line-height: 1.35; }
.cvv .cv-main { display: flex; flex-direction: column; gap: 3.8mm; min-height: 0; }
.cvv .cv-main .cv-work { flex: 1; }
.cvv .cv-side .cv-off { flex: 1; background: var(--k-card); }
.cvv .cv-off p { line-height: 1.55; }
.cvv .cv-pr-g { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5mm; }
.cvv .cv-pr-g .cv-k { color: var(--y); font-weight: 700; margin-bottom: 1.4mm; }
.cvv .cv-foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 7.4pt; color: var(--muted); border-top: 1px solid var(--line); padding-top: 3mm; }
.cvv .cv-foot .cv-bye { font-size: 12pt; color: var(--ink); }
.viewer-actions .viewer-dl { background: var(--k-card); color: var(--ink); text-decoration: none; }
.viewer-actions .viewer-dl[hidden] { display: none; }


/* ------ Pause motion (footer): stops the self-running animations; scrolling still draws the diagram ------ */
.fine { align-items: center; }
.still-btn { margin: -14px 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.still-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.still-btn .sb-g { display: none; fill: currentColor; stroke: none; }
.still-btn[aria-pressed="true"] .sb-p { display: none; }
.still-btn[aria-pressed="true"] .sb-g { display: inline; }
.still-btn:hover .sb-l { text-decoration: underline; text-underline-offset: 3px; }
.still-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
html.still .ch-sub.open.breathe a, html.still .ch-ghost { animation: none !important; }
html.still .ch-ghost { display: none; }

/* a lone pill (odd count) spans the row instead of leaving a gap */
.pills > :last-child:nth-child(odd) { grid-column: 1 / -1; }


/* ------ Hero: one quiet line under the name, pointing to the freelance block ------ */
.hero-av { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; min-height: 36px; font-size: 13px; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.hero-av i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; flex: none; }
.hero-av i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2E9E5B; animation: avPing 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes avPing { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }
.hero-av svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .25s cubic-bezier(.23,1,.32,1), opacity .2s; }
.hero-av:hover svg { transform: translateY(2px); opacity: 1; }
.hero-av:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html.still .hero-av i::after { animation: none; opacity: 0; }

/* ------ Contact: available for (freelance) ------ */
.av { margin: 8px 0 56px; padding: 32px 34px 30px; border-radius: 22px; background: var(--card); scroll-margin-top: 130px; }
.av-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.av-t { font-size: clamp(22px, 3vw, 32px); line-height: 1.1; margin: 0 0 10px; }
.av-s { font-size: 14px; color: var(--muted); margin: 0 0 24px; max-width: 52ch; }
.av-l { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
.av-l li { display: grid; grid-template-columns: 11em 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.av-n { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--ink); }
.av-d { font-size: 13px; color: var(--muted); line-height: 1.45; }
.av-b { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.av-b:hover { transform: translateY(-2px); } .av-b:active { transform: scale(.97); }
.av-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.av-b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.av-b:hover svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .av { padding: 22px 20px 22px; margin-bottom: 40px; }
  .av-l { grid-template-columns: 1fr; }
  .av-l li { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .hero-av { font-size: 12px; margin-top: 14px; }
  .hav-x { display: none; }
}

/* ------ Language: one glass bubble (globe + code) opposite the light switch; it gives way to three flags ------ */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang { position: fixed; z-index: 22; top: calc(max(14px, env(safe-area-inset-top)) + 6px); left: calc(max(14px, env(safe-area-inset-left)) + 8px); height: 36px; }
.lang-g, .lang-f { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 .5px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.12); border-radius: 999px; }
.lang-g { all: unset; position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; box-sizing: border-box; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 .5px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.12); border-radius: 999px;
  transition: opacity .2s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.lang-g:focus-visible, .lang-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-gl { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.lang-g:hover .lang-gl { transform: rotate(-20deg); }
.lang-cur, .lang-b span { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 12px; letter-spacing: .02em; color: var(--ink); }
.lang.open .lang-g { opacity: 0; transform: scale(.6); pointer-events: none; }
.lang-f { position: absolute; top: 0; left: 0; display: flex; gap: 4px; padding: 4px; opacity: 0; transform: scale(.6); transform-origin: 18px 50%; pointer-events: none;
  transition: opacity .2s .1s, transform .3s cubic-bezier(.55,0,.75,.2); }
.lang.open .lang-f { opacity: 1; transform: none; pointer-events: auto; transition: opacity .15s, transform .5s cubic-bezier(.3,1.6,.55,1); }
.lang-b { display: inline-flex; align-items: center; gap: 0; height: 28px; padding: 0 2px; border-radius: 999px; text-decoration: none; opacity: 0; transform: translateX(var(--lx, 0)) scale(.3);
  transition: transform .32s cubic-bezier(.55,0,.75,.2), opacity .18s .08s, background-color .25s, padding .35s cubic-bezier(.3,1.5,.5,1), gap .35s; }
.lang-b svg { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: block; flex: none; }
.lang-b span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
.lang-b.on { background: var(--bg); padding: 0 10px 0 3px; gap: 6px; box-shadow: 0 0 0 1px var(--line); }
.lang-b.on span { max-width: 3em; opacity: 1; }
.lang.open .lang-b { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.3,1.65,.55,1), opacity .18s, background-color .25s, padding .35s cubic-bezier(.3,1.5,.5,1), gap .35s; }
.lang.open .lang-b:nth-child(2) { transition-delay: .06s; } .lang.open .lang-b:nth-child(3) { transition-delay: .12s; }
.lang.open .lang-b:not(.on) { opacity: .75; } .lang.open .lang-b:not(.on):hover { opacity: 1; }
:root[data-theme="dark"] .lang-g, :root[data-theme="dark"] .lang-f { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.4); }
:root[data-theme="dark"] .lang-b svg { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-g, :root:not([data-theme="light"]) .lang-f { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .lang-b svg { box-shadow: 0 0 0 1px rgba(255,255,255,.18); } }
@media (prefers-reduced-motion: reduce) { .lang-g, .lang-f, .lang-b, .lang-b span, .lang-gl { transition-duration: .01s !important; transition-delay: 0s !important; } }
/* the compact title bar leaves room for the language bubble wherever its left edge would run under it */
@media (max-width: 1143px) { .stick-bar { padding-left: 52px; } }
@media (max-width: 760px) { .stick-bar { padding-left: 68px; } }

/* ------ Privacy: the footer link and the note in the viewer ------ */
.priv-btn { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; }
.priv-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.priv-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.doc { max-width: 62ch; padding-bottom: 48px; }
.doc-lead { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; color: var(--ink); margin: 0 0 28px; }
.doc h3 { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 15px; color: var(--ink); margin: 26px 0 6px; }
.doc p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }
.doc a { color: var(--ink); text-underline-offset: 3px; }
.fine-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.phn { display: inline-block; flex: none; }