@font-face { font-family: "PP Migra"; src: url("../fonts/PPMigra-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Hatton"; src: url("../fonts/PPHatton-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Lettra Mono"; src: url("../fonts/PPLettraMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Relative Pitch"; src: url("../fonts/Relative-10Pitch.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Gatwick"; src: url("../fonts/PPGatwick-JetSemibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Right Serif"; src: url("../fonts/PP-Right-Serif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Stellar"; src: url("../fonts/PPStellar-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Watch"; src: url("../fonts/PPWatch-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Telegraf"; src: url("../fonts/PPTelegraf-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Telegraf"; src: url("../fonts/PPTelegraf-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Frama"; src: url("../fonts/PPFrama-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Playground"; src: url("../fonts/PPPlayground-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --pad-left: 124px; --pad-news: 340px; --pad-people: 620px; --pad-about: 900px; --pad-contact: 1180px; --accent: #ff0000; --ink: #0D0D0E; --paper: #FAFFFD; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: "Relative Pitch", ui-monospace, monospace; -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh; }
::selection { background: #001aff; color: var(--paper); }
a { color: var(--ink); text-decoration: none; }
.hoverlink:hover { color: var(--accent); }
.backlink:hover { color: var(--accent); border-color: var(--accent); }
.hero-hover { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.top-card > div[style*="background-image"] { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.card-hover-black, .card-zoom-only { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.top-card::after, .card-hover-black::after, .card-box::after { content: ""; position: absolute; inset: 0; background: #0D0D0E; opacity: 0; pointer-events: none; z-index: 1; }
.card-box { transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
/* mouse: hover effects */
@media (hover: hover) {
  .hero-hover:hover { transform: scale(1.015); }
  .top-card:hover, .card-hover-black:hover, .card-zoom-only:hover { transform: scale(1.008); transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
  .top-card:hover::after, .card-hover-black:hover::after { opacity: 1; }
  .small-card:hover .card-box::after { opacity: 1; }
  .small-card:hover .card-box { transform: scale(1.008); }
}
/* touch screens: no hover effects on cards */
#app main { animation: fade-in 700ms cubic-bezier(0.16,1,0.3,1) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* project gallery (desktop only) */
@media (min-width: 721px) { main img.hero-hover { cursor: zoom-in; } }
.lb { position: fixed; inset: 0; z-index: 40; background: var(--paper); display: grid; grid-template-columns: clamp(20px,6vw,100px) 1fr clamp(20px,6vw,100px); grid-template-rows: clamp(20px,5vw,50px) auto 1fr 64px; opacity: 0; transition: opacity 250ms ease; }
.lb.open { opacity: 1; }
.lb button { all: unset; cursor: pointer; font-family: "PP Lettra Mono", monospace; font-size: 28px; line-height: 1; color: var(--ink); padding: 8px; transition: color 150ms ease; }
.lb button:hover { color: var(--accent); }
.lb .lb-close { position: absolute; top: 0; right: 0; width: clamp(20px,6vw,100px); height: clamp(20px,6vw,100px); padding: 0; display: flex; align-items: center; justify-content: center; } /* on the same vertical line as the → arrow, same distance from the top as from the right edge */
.lb .lb-prev, .lb .lb-next { grid-row: 3; align-self: center; justify-self: center; }
.lb .lb-prev { grid-column: 1; } .lb .lb-next { grid-column: 3; }
.lb-stage { grid-column: 2; grid-row: 3; position: relative; min-height: 0; padding: 20px 0; }
.lb-stage img { position: absolute; inset: 20px 0; width: 100%; height: calc(100% - 40px); object-fit: contain; cursor: pointer; transition: opacity 200ms ease; }
.lb-count { grid-column: 2; grid-row: 4; align-self: center; justify-self: center; font-family: "PP Lettra Mono", monospace; font-size: 14px; color: var(--ink); }