/* Jenni Hänninen – portfolio */
:root {
  --blue: #170df2;
  --pink: #fd45f3;
  --text: #000;
  --bg: #fff;
  --display: "Syne", sans-serif;
  --body: "Questrial", sans-serif;
  --gutter: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.4;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
}

.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.site-nav a {
  font-size: 16px;
  text-decoration: none;
  color: var(--text);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--blue); }

/* Home: work sections */
.work-section { padding-top: 120px; }
.work-section:first-of-type { padding-top: 100px; }

.section-title {
  margin: 0 0 60px;
  padding: 0 var(--gutter);
  font-family: var(--display);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.2;
  color: var(--blue);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.tile {
  all: unset;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
}

button.tile { cursor: zoom-in; }

/* Logo on a brand colour, used instead of a photo */
.logo-tile,
.logo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid .logo-tile img {
  width: 42%;
  height: auto;
  object-fit: contain;
}

.logo-hero img { width: min(40%, 480px); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-3 .logo-tile img { width: 55%; }
div.tile { cursor: default; }
div.tile:hover img { transform: none; }

.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tile:hover img { transform: scale(1.03); }
.tile:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }

.tile-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-size: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tile-info strong {
  display: block;
  font-family: var(--display);
  font-size: 22px;
}

.tile:hover .tile-info,
.tile:focus-visible .tile-info { opacity: 1; }

@media (hover: none) {
  .tile-info { opacity: 1; }
}

/* Project pages */
.project-hero {
  width: 100%;
  height: calc(100vh - 60px);
  min-height: 360px;
  object-fit: cover;
}

.project-intro {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
  max-width: 1200px;
  padding: 150px var(--gutter) 100px;
}

.project-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.4;
  color: var(--blue);
}

.project-text {
  max-width: 560px;
  font-size: 15px;
  color: #404040;
}

.project-text p { margin: 0 0 21px; }

.project-text .credit {
  margin-top: 36px;
  font-size: 12px;
  color: var(--blue);
}

.project-media img,
.project-media video {
  display: block;
  width: 100%;
  height: auto;
}

.project-quote {
  max-width: 820px;
  margin: 0 auto;
  padding: 130px var(--gutter);
  color: var(--blue);
}

.project-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4;
}

.project-quote.big blockquote { font-size: 80px; line-height: 1.1; }

.project-quote blockquote p { margin: 0 0 24px; }

.project-quote figcaption { font-size: 14px; }

.project-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 60px;
  padding: 80px var(--gutter);
}

.project-nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--blue);
  text-decoration: none;
}

.project-nav a:hover { text-decoration: underline; }

/* Contact block */
.say-hello {
  padding: 140px var(--gutter) 90px;
  text-align: center;
}

.say-hello h2 {
  margin: 0 0 28px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.4;
  color: var(--blue);
}

.button {
  display: inline-block;
  padding: 13px 34px;
  border-radius: 30px;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.2s;
}

.button:hover { background: var(--blue); }

.more-link {
  display: block;
  margin-top: 40px;
  font-family: var(--display);
  color: var(--blue);
}

.site-footer {
  border-top: 1px solid var(--blue);
  padding: 50px var(--gutter);
  text-align: center;
  font-size: 13px;
  color: var(--blue);
}

.site-footer p { margin: 0; }

/* About pages */
.about {
  max-width: 560px;
  margin: 0 auto;
  padding: 90px var(--gutter) 0;
  color: var(--blue);
}

.about h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
}

.lang-switch {
  display: block;
  margin: 12px 0 24px;
  text-align: right;
  font-size: 13px;
}

.portrait {
  width: 100%;
  max-width: 400px;
  margin-bottom: 32px;
}

.about p { margin: 0 0 24px; }

.about h2 {
  margin: 60px 0 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
}

.skills { margin: 0 0 24px; padding-left: 31px; list-style: none; }

.contact { list-style: none; margin: 0; padding: 0; }

.expertise {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px var(--gutter) 0;
  color: var(--blue);
}

.expertise h2 {
  margin: 0 0 36px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 38px;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.expertise-grid button {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.expertise-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.expertise-grid span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.97);
  cursor: zoom-out;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  border: 0;
  background: none;
  font-size: 40px;
  line-height: 1;
  color: var(--blue);
  cursor: pointer;
}

/* Phones */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  html { scroll-padding-top: 110px; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px var(--gutter); }
  .site-nav { gap: 4px 16px; }
  .site-nav a { font-size: 14px; }
  .work-section { padding-top: 72px; }
  .work-section:first-of-type { padding-top: 48px; }
  .section-title { font-size: 34px; margin-bottom: 28px; }
  .grid,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 .logo-tile img { width: 42%; }
  .tile-info { padding: 12px 16px; font-size: 13px; }
  .tile-info strong { font-size: 18px; }
  .project-hero { height: auto; min-height: 0; object-position: center !important; }
  .logo-hero { aspect-ratio: 16 / 9; }
  .project-intro { grid-template-columns: 1fr; gap: 24px; padding: 56px var(--gutter) 56px; }
  .project-quote { padding: 72px var(--gutter); }
  .project-quote blockquote { font-size: 22px; }
  .project-quote.big blockquote { font-size: 44px; }
  .say-hello { padding-top: 90px; }
  .say-hello h2 { font-size: 30px; }
  .about { padding-top: 48px; }
  .about h1 { font-size: 54px; }
  .expertise { padding-top: 80px; }
  .expertise h2 { font-size: 30px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
}

/* ===== Home, version 2 ===================================================== */
/* Black and white only; Finnish first, English as small notes; nothing moves. */
.v2-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter);
  color: #fff;
}

.v2-logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: inherit;
  text-decoration: none;
}

.v2-nav { display: flex; gap: 28px; }

.v2-nav a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.v2-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.v2-en { font-size: 13px; opacity: 0.65; }

.v2-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 32px;
  align-items: start;
  padding: 130px var(--gutter) 0;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}

.v2-intro-text { grid-column: 1 / 5; padding-top: 30px; }

.v2-lead {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1.2;
}

.v2-intro .v2-en { margin: 0 0 36px; }

.v2-contact { margin: 0; font-size: 15px; line-height: 1.7; }
.v2-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.v2-contact a:hover { border-color: #fff; }

.v2-note { margin: 0; font-size: 14px; line-height: 1.5; }
.v2-note-a { grid-column: 5 / 7; padding-top: 140px; }
.v2-note-b { grid-column: 10 / 12; align-self: end; padding-bottom: 40px; }

.v2-portrait {
  grid-column: 7 / 10;
  position: relative;
  margin: 0;
}

.v2-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1167 / 1766; /* portrait-home.jpg is cropped to the chosen framing */
  object-fit: cover;
}

/* Photographer credit, revealed on hover */
.v2-portrait figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(34, 31, 17, 0.6));
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}

.v2-portrait figcaption span { opacity: 0.65; }

.v2-portrait:hover figcaption { opacity: 1; }

@media (hover: none) {
  .v2-portrait figcaption { opacity: 1; background: none; padding: 8px 0 0; position: static; font-size: 10px; }
}

.v2-bigtitle {
  grid-column: 1 / -1;
  margin: 24px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc((100vw - 2 * var(--gutter)) / 7.02); /* "Graphic Designer" fills the row */
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transform: translateY(0.12em); /* sits on the bottom edge */
}

/* Sections */
.v2 { color: var(--ink); }

.v2-kicker {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.v2-latest { padding: 110px var(--gutter) 90px; }

.v2-latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 28px;
}

.v2-card { display: block; color: var(--ink); text-decoration: none; }

.v2-logo-box,
.v2-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.v2-logo-box img { width: 50%; height: auto; }

/* Latest projects are shown upright; the work grid stays landscape */
.v2-latest .v2-logo-box { aspect-ratio: 3 / 4; }
.v2-latest .v2-logo-box img { width: 62%; }
.v2-img img { width: 100%; height: 100%; object-fit: cover; }

.v2-label {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.v2-title {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
}

a.v2-card:hover .v2-title { text-decoration: underline; text-underline-offset: 4px; }

.v2-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  padding: 100px var(--gutter) 0;
}

.v2-services > div { border-top: 1px solid var(--ink); padding-top: 20px; }

.v2-services h3 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
}

.v2-services ul { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.7; color: var(--ink); }

.v2-quotes { padding: 90px var(--gutter); background: var(--ink); color: #fff; }

.v2-quotes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  margin-top: 32px;
}

.v2-quotes figure { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 20px; }

.v2-quotes blockquote {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
}

.v2-quotes figcaption { font-size: 13px; opacity: 0.65; }

.v2-work { padding: 110px var(--gutter) 110px; }

.v2-work-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.v2-filters { display: flex; flex-wrap: wrap; gap: 8px; }

.v2-filters button {
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 30px;
  background: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  cursor: pointer;
}

.v2-filters button:hover { background: #f0f0f0; }
.v2-filters button.is-active { background: var(--ink); color: #fff; }

.v2-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}

.v2-work-grid .is-hidden { display: none; }

.v2-footer { padding: 120px var(--gutter) 40px; color: var(--ink); overflow: hidden; }

.v2-hello { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.v2-hello .v2-en { margin-left: 12px; letter-spacing: 0.08em; }

.v2-bigname {
  margin: 10px 0 40px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc((100vw - 2 * var(--gutter)) / 5.506); /* "Sanotaanko moi?" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.v2-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  font-size: 15px;
}

.v2-footer-cols p { margin: 0; line-height: 1.7; }
.v2-footer-cols a { color: inherit; }
.v2-footer-cols p:first-child a { text-decoration: none; }

@media (max-width: 900px) {
  .v2-intro { grid-template-columns: repeat(6, 1fr); padding-top: 110px; }
  .v2-intro-text { grid-column: 1 / -1; padding-top: 0; }
  .v2-note-a { grid-column: 1 / 3; padding-top: 40px; }
  .v2-portrait { grid-column: 3 / 6; margin-top: 40px; max-height: none; }
  .v2-note-b { grid-column: 6 / 7; padding-bottom: 20px; }
  .v2-latest-grid, .v2-work-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-services, .v2-quotes-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .v2-header { padding: 16px var(--gutter); }
  .v2-nav { gap: 14px; }
  .v2-nav a { font-size: 12px; letter-spacing: 0.08em; }
  .v2-lead { font-size: 24px; }
  .v2-intro { grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
  .v2-note-a { grid-column: 1 / 2; padding-top: 30px; font-size: 11px; }
  .v2-portrait { grid-column: 2 / 5; margin-top: 30px; }
  .v2-note-b { grid-column: 1 / 2; grid-row: 3; font-size: 11px; }
  .v2-latest-grid, .v2-work-grid, .v2-services, .v2-quotes-grid { grid-template-columns: 1fr; }
  .v2-latest, .v2-work { padding-top: 72px; }
  .v2-quotes { padding: 72px var(--gutter); }
  .v2-title { font-size: 20px; }
  .v2-footer { padding-top: 80px; }
  .v2-footer-cols { grid-template-columns: 1fr; }
}

/* ===== About, version 2 (bilingual: Finnish leads, English smaller) ======= */
.v2-header-light { color: var(--ink); }

.v2-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.v2-about-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr; /* row 2 is as tall as the portrait; longer Finnish text spills into row 3 */
  gap: 0 32px;
  align-items: start;
  padding: 130px var(--gutter) 110px;
}

.v2-about-title {
  grid-column: 1 / -1;
  margin: 0 0 56px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc((100vw - 2 * var(--gutter)) / 5.927); /* "Graphic Designer" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Desktop: English + quote left, portrait centre, Finnish right (all on row 2, under the title) */
.v2-about-fi { grid-column: 9 / -1; grid-row: 2 / span 2; padding-left: 12px; font-size: 17px; line-height: 1.6; }
.v2-about-fi p { margin: 0 0 20px; }

.v2-about-mid {
  grid-column: 1 / 5;
  grid-row: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}

/* English text sits on the portrait's bottom edge */
.v2-about-mid .v2-about-en { margin-top: auto; padding-top: 36px; }
.v2-about-en p:last-child { margin-bottom: 0; }

.v2-about-quote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.2;
}

.v2-about-quote p { margin: 0 0 0.6em; }
.v2-about-quote p:last-child { margin-bottom: 0; }

.v2-about-en { margin-top: 36px; font-size: 13px; line-height: 1.6; color: var(--ink); }

.v2-about-checks { margin: 0 0 28px; padding: 0; list-style: none; line-height: 1.9; }
.v2-about-checks li { display: flex; align-items: center; gap: 10px; }

.v2-about-contact {
  margin: 36px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink);
  list-style: none;
  line-height: 2;
}

.v2-about-contact a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.v2-about-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v2-icon { width: 18px; height: 18px; flex: none; }
.v2-about-en p { margin: 0 0 14px; }

.v2-about-portrait { grid-column: 5 / 9; grid-row: 2; align-self: stretch; }
/* If the left column runs taller than the photo, the photo grows (cropping its sides a little) so both still end on one line */
.v2-about-portrait img { height: 100%; }
/* Same crop as the home page portrait (aspect set on .v2-portrait img) */


/* Client logos: a slow, continuous strip (the only moving element, by request) */
.v2-clients {
  overflow: hidden;
  padding: 0 0 25px;
  background: var(--bg);
}

.v2-clients-track {
  display: flex;
  width: max-content;
  animation: v2-clients 80s linear infinite;
}

.v2-clients-track + .v2-clients-track { margin-top: 28px; animation-direction: reverse; } /* bottom row runs the other way */


.v2-clients-run {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}

.v2-clients-run img {
  display: block;
  width: auto;
  height: calc(24px * var(--s, 1)); /* --s: per-logo size balance, set in clients.json */
  max-width: calc(110px * var(--s, 1));
  object-fit: contain;
}

@keyframes v2-clients { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .v2-clients-track { animation: none; }
  .v2-clients { overflow-x: auto; }
}

/* Key skills: one centred run of big Finnish type, English listed small underneath */
.v2-skills {
  padding: 110px var(--gutter) 120px;
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.v2-skills .v2-kicker { margin-bottom: 40px; }

.v2-skills-text {
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(30px, 4.3vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.v2-skills-text { font-weight: 700; }
.v2-skill:not(:last-child)::after { content: " / "; font-weight: 400; opacity: 0.35; }

.v2-skills-en {
  max-width: 900px;
  margin: 36px auto 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  opacity: 0.55;
}

.v2-kicker .v2-en { margin-left: 8px; letter-spacing: 0; text-transform: none; }

.v2-about-expertise { padding: 110px var(--gutter) 40px; }

.v2-expertise-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 32px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.v2-expertise-grid .v2-exp-item {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.v2-expertise-grid .v2-exp-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Captions: centred, Finnish 800 and English 200 at the same size, body-text line height */
.v2-expertise-grid .v2-exp-item { text-align: center; }
.v2-expertise-grid .v2-title,
.v2-page .v2-expertise-grid .v2-en {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Same sizes as the About body texts: Finnish like the Finnish intro, English like the English intro */
.v2-expertise-grid .v2-title { margin-top: 10px; font-size: 13px; font-weight: 400; } /* Finnish only, regular weight */
.v2-page .v2-expertise-grid .v2-en { font-size: 13px; font-weight: 200; }
@media (max-width: 900px) {
  .v2-about-intro { grid-template-columns: repeat(6, 1fr); grid-template-rows: none; padding-top: 110px; }
  .v2-about-mid { display: block; }
  .v2-about-portrait { align-self: start; }
  .v2-about-portrait img { height: auto; }
  .v2-about-mid .v2-about-en { padding-top: 0; margin-top: 36px; }
  .v2-about-fi { grid-column: 1 / 4; grid-row: auto; padding-left: 0; }
  .v2-about-portrait { grid-column: 4 / -1; grid-row: auto; }
  .v2-about-mid { grid-column: 1 / -1; grid-row: auto; padding: 0; margin-top: 48px; }
  .v2-expertise-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .v2-about-intro { grid-template-columns: 1fr; padding-bottom: 72px; }
  .v2-about-title { margin-bottom: 32px; }
  .v2-about-fi, .v2-about-mid, .v2-about-portrait { grid-column: 1 / -1; }
  .v2-about-quote { margin-top: 24px; font-size: 24px; }
  .v2-skills { padding: 72px var(--gutter) 80px; }
  .v2-clients { padding-bottom: 16px; }
  .v2-clients-run { gap: 28px; padding-right: 28px; }
  .v2-clients-run img { height: calc(20px * var(--s, 1)); max-width: calc(86px * var(--s, 1)); }
  .v2-clients-track + .v2-clients-track { margin-top: 20px; }
  .v2-expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}

/* Rounded image corners on the version-2 home and About pages */
.v2 { --radius: 14px; } /* matches the reference: a soft, small rounding on all four corners */
.v2-expertise-grid { --radius: 10px; } /* the small thumbnails get a little less */

.v2 .v2-img,
.v2 .v2-logo-box {
  border-radius: var(--radius);
  overflow: hidden;
}

/* The portrait rounds the photo itself, so a credit shown below it on phones isn't clipped */
.v2 .v2-portrait figcaption { border-radius: 0 0 var(--radius) var(--radius); }

@media (hover: none) {
  .v2 .v2-portrait figcaption { border-radius: 0; }
}

.v2 .v2-portrait img { border-radius: var(--radius); }

/* Big section headings: same size and face as the key skills statement */
.v2-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.3vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
}

.v2-heading .v2-en {
  margin-left: 12px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  vertical-align: baseline; /* sits on the big heading's baseline */
}

.v2-latest-grid { margin-top: 40px; }
.v2-work-head { margin-bottom: 40px; }

/* Version-2 pages use Bricolage Grotesque (display) and DM Sans (text) */
.v2-page {
  --display: "Bricolage Grotesque", sans-serif;
  --body: "DM Sans", sans-serif;
  font-family: var(--body);
}

/* Bricolage Grotesque widens at small sizes (optical sizing); pin the page-wide titles
   to their display cut so they fill the row the same way on every screen */
.v2-page .v2-bigtitle,
.v2-page .v2-bigname,
.v2-page .v2-about-title { font-variation-settings: "opsz" 96; }

/* Colours on the version-2 pages: dark brown instead of black, warm brown accent */
.v2-page {
  --ink: #221f11;
  --accent: #221f11; /* one brown everywhere */
  color: var(--ink);
}

.v2-filters button { border-color: var(--accent); color: var(--accent); }
.v2-filters button:hover { background: rgba(34, 31, 17, 0.08); }
.v2-filters button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

a.v2-card:hover .v2-title,
.v2-about-contact a:hover,
.v2-footer-cols a:hover { color: var(--accent); }

.v2-about-checks .v2-icon,
.v2-about-contact .v2-icon { color: var(--accent); }

/* Text on white backgrounds: full-strength dark brown for legibility
   (dark sections – intro, quotes, skills – keep their softer light text) */
.v2-page .v2-services ul,
.v2-page .v2-label,
.v2-page .v2-about-en,
.v2-page .v2-latest .v2-en,
.v2-page .v2-work .v2-en,
.v2-page .v2-hello .v2-en,
.v2-page .v2-about-expertise .v2-en,
.v2-page .v2-about-intro .v2-en {
  color: var(--ink);
  opacity: 1;
}
.v2-page .lightbox-close { color: var(--ink); }

/* Strict two-colour palette on the version-2 pages: only white and #221F11.
   No faded text, see-through lines or tinted overlays (they create in-between shades). */
.v2-page .v2-en,
.v2-page .v2-quotes figcaption,
.v2-page .v2-skills-en,
.v2-page .v2-portrait figcaption span { opacity: 1; }

.v2-page .v2-skill:not(:last-child)::after { opacity: 1; }

.v2-page .v2-contact a { border-bottom-color: #fff; }
.v2-page .v2-quotes figure { border-top-color: #fff; }

.v2-page .v2-portrait figcaption { background: none; text-shadow: none; }

.v2-page .v2-filters button:hover { background: var(--ink); color: #fff; }

.v2-page .lightbox { background: #fff; }

/* Key skills alternate heavy and extra-light */
.v2-page .v2-skill:nth-child(odd) { font-weight: 800; }
.v2-page .v2-skill:nth-child(even) { font-weight: 200; }
.v2-page .v2-skill:not(:last-child)::after { font-weight: 200; }

/* Page-wide titles: first word extra light (200), second word heavy (800) */
.v2-page .v2-bigtitle b,
.v2-page .v2-bigname b,
.v2-page .v2-about-title b { font-weight: 200; }

.v2-page .v2-bigtitle span,
.v2-page .v2-bigname span,
.v2-page .v2-about-title span { font-weight: 800; }

/* Home title position inside the dark intro */
.v2-page .v2-bigtitle { transform: translateY(-0.122em); } /* about 36 px from the baseline to the dark edge on a 1440 px screen */

/* Section headings: Finnish heavy (800), English same size extra light (200) */
.v2-page .v2-heading { font-weight: 800; letter-spacing: -0.02em; text-transform: none; }

.v2-page .v2-heading .v2-en {
  margin-left: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  vertical-align: baseline;
}

.v2-about-expertise .v2-heading { margin-bottom: 40px; text-align: center; }

/* Osaaminen captions: tight line height */
.v2-page .v2-expertise-grid .v2-title { line-height: 1.2; }

/* ===== Project pages, version 2 ============================================ */
/* Header sits in the flow above the full-width hero */
.v2-page:has(.v2-project) .v2-header { position: relative; }

.v2-project-hero {
  display: block;
  width: 100%;
  height: calc(100vh - 70px);
  min-height: 360px;
  object-fit: cover;
}

/* Elisa: logo on its brand colour instead of a photo */
.v2-logo-hero { display: flex; align-items: center; justify-content: center; }
.v2-logo-hero img { width: min(40%, 480px); }

.v2-project-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  padding: 110px var(--gutter) 90px;
}

/* Left: title, then the English summary pushed down so its last line sits level with
   the last line of the Finnish text on the right. Credit goes on a row of its own. */
.v2-project-lead {
  grid-column: 1 / 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

.v2-project-lead .v2-heading { margin: 0; }

.v2-project-summary {
  margin-top: auto;
  padding-top: 40px;
  max-width: 440px;
  font-size: 13px;
  line-height: 1.6;
}

.v2-project-summary p { margin: 0; }

.v2-project-text {
  grid-column: 7 / -1;
  grid-row: 1;
  align-self: end; /* a short text drops down so its last line meets the English summary */
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
}

.v2-project-text p { margin: 0 0 20px; }
.v2-project-text p:last-child { margin-bottom: 0; }

.v2-project-credit { margin: 16px 0 0; font-size: 13px; }

/* Content images: as wide as the text area, rounded like the home page images */
.v2-project-media {
  display: grid;
  gap: 32px;
  max-width: calc(1080px + 2 * var(--gutter)); /* narrower than the page, centred */
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.v2-project-media img,
.v2-project-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.v2-project-media + .v2-project-media { margin-top: 32px; }

.v2-project-quote {
  max-width: 980px;
  margin: 0 auto;
  padding: 120px var(--gutter);
  text-align: center;
}

.v2-project-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.v2-project-quote.is-big blockquote { font-size: clamp(40px, 6vw, 96px); line-height: 1.05; letter-spacing: -0.02em; }

.v2-project-quote blockquote p { margin: 0 0 20px; }
.v2-project-quote b { font-weight: 800; } /* figures and key phrases */

.v2-project-quote figcaption { font-size: 13px; }

.v2-project-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  max-width: calc(1080px + 2 * var(--gutter)); /* edges line up with the images */
  margin: 0 auto;
  padding: 110px var(--gutter) 0;
}

.v2-project-nav a {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.v2-project-nav a { font-weight: 200; }
.v2-project-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

@media (max-width: 900px) {
  .v2-project-intro { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--gutter) 56px; }
  .v2-project-lead,
  .v2-project-text { grid-column: 1 / -1; grid-row: auto; }
  .v2-project-summary { padding-top: 16px; }
  .v2-project-hero { height: auto; min-height: 0; }
  .v2-logo-hero { aspect-ratio: 4 / 3; }
  .v2-project-media { gap: 16px; }
  .v2-project-media + .v2-project-media { margin-top: 16px; }
  .v2-project-quote { padding: 72px var(--gutter); }
  .v2-project-nav { padding-top: 72px; }
}

/* Project pages: dark #221F11 background with white type (same two colours, swapped) */
.v2-page:has(.v2-project) {
  --bg: #221f11;
  --ink: #fff;
  --accent: #fff;
}
.v2-page:has(.v2-project) .lightbox { background: var(--bg); }

/* Project pages: header and footer stay on white with dark type */
.v2-page:has(.v2-project) .v2-header,
.v2-page:has(.v2-project) .v2-footer {
  --ink: #221f11;
  --accent: #221f11;
  background: #fff;
  color: var(--ink);
}
.v2-page:has(.v2-project) .v2-project-nav { padding-bottom: 110px; }

/* Home page sections: More works and the footer on dark #221F11, client quotes on white */
.v2-page .v2-work,
.v2-page:has(.v2-intro) .v2-footer {
  --ink: #fff;
  --accent: #fff;
  background: #221f11;
  color: #fff;
}
.v2-page .v2-work .v2-filters button:hover,
.v2-page .v2-work .v2-filters button.is-active { background: #fff; color: #221f11; }

.v2-page .v2-quotes {
  --ink: #221f11;
  background: #fff;
  color: #221f11;
}
.v2-page .v2-quotes figure { border-top-color: #221f11; }

/* Client quotes: heading like Osaaminen (centred, 800 + 200), quotes thin and a little larger */
/* "Asiakkaat sanovat" fills the row like the other page-wide titles */
.v2-page .v2-quotes .v2-heading {
  margin-bottom: 40px;
  text-align: center;
  font-size: calc((100vw - 2 * var(--gutter)) / 4.833); /* "Kyliltä kuultua" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  white-space: nowrap;
  font-variation-settings: "opsz" 96;
}
.v2-quotes .v2-quotes-grid { margin-top: 28px; }
.v2-page .v2-quotes blockquote { font-weight: 200; font-size: 28px; }
.v2-page .v2-quotes figcaption { font-family: var(--display); font-weight: 700; font-size: 18px; } /* who said it */

/* Unified text sizes: 12px small caps labels, 14px small text, 16px body;
   project names and service headings share one display size */
.v2-nav a { font-size: 12px; }
.v2-page .v2-intro .v2-en { font-size: 14px; }
.v2-contact,
.v2-footer-cols { font-size: 16px; }
.v2-title,
.v2-services h3 { font-size: 32px; }
@media (max-width: 560px) {
  .v2-title,
  .v2-services h3 { font-size: 20px; }
}

/* Sentence case everywhere: category labels and nav in the 14px small-text size; thin logo */
.v2-page .v2-label { font-size: 14px; letter-spacing: 0; text-transform: none; }
.v2-page .v2-nav a { font-size: 14px; letter-spacing: 0; text-transform: none; }
.v2-page .v2-logo { font-weight: 400; }

/* Home cards: project name first, its category underneath */
.v2-card .v2-title { margin-top: 14px; }
.v2-card .v2-label { margin-top: 4px; }

/* About: the logo strip sits midway between the portrait and the dark skills band */
.v2-about-intro { padding-bottom: 68px; }
.v2-clients { padding-bottom: 68px; }
@media (max-width: 560px) {
  .v2-about-intro { padding-bottom: 44px; }
  .v2-clients { padding-bottom: 44px; }
}

/* Osaaminen: the Finnish captions are a bold visual element; long words hyphenate only when they don't fit */
.v2-page .v2-expertise-grid .v2-title {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  hyphens: manual; /* breaks only at the soft hyphens set in build.py, and only when a word doesn't fit */
  overflow-wrap: normal;
}
/* Fewer, wider columns on narrower screens so the 26px captions fit */
@media (max-width: 1300px) { .v2-expertise-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px) { .v2-expertise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v2-expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Osaaminen: heading and captions left-aligned, square images */
.v2-about-expertise .v2-heading { text-align: left; }
.v2-expertise-grid .v2-exp-item { text-align: left; }
.v2-expertise-grid .v2-img { aspect-ratio: 1 / 1; }

/* Osaaminen: ten images side by side; captions scaled down with them */
.v2-expertise-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 28px 14px; }
.v2-page .v2-expertise-grid .v2-title { margin-top: 10px; font-size: 18px; }
@media (max-width: 1300px) { .v2-expertise-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 960px) { .v2-expertise-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v2-expertise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; } }

/* Skills: the slash sits against the next item ("/Graphic design"), not after the previous one */
.v2-page .v2-skill:not(:last-child)::after { content: none; }
.v2-page .v2-skill + .v2-skill::before { content: "/"; font-weight: 200; }

/* Osaaminen captions: same type as the English intro text (DM Sans 13px regular) */
.v2-page .v2-expertise-grid .v2-title {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  font-variation-settings: normal;
  hyphens: manual; /* only the three longest words have break points */
}

/* Header: nav links in the same type as the logo */
.v2-page .v2-nav a { font-family: var(--display); font-size: 16px; font-weight: 400; letter-spacing: normal; }
@media (max-width: 560px) { .v2-page .v2-nav a { font-size: 16px; } }

/* Home intro without the side notes: the text gets a little more room */
.v2-intro-text { grid-column: 1 / 6; }
@media (max-width: 900px) { .v2-intro-text { grid-column: 1 / -1; } }
@media (max-width: 900px) { .v2-portrait { grid-column: 1 / 5; } }
@media (max-width: 560px) { .v2-portrait { grid-column: 1 / -1; } }

/* Home intro: paragraph spacing +10 % (16 → 17.6px, 36 → 39.6px) */
.v2-intro .v2-lead { margin-bottom: 17.6px; }
.v2-intro .v2-en { margin-bottom: 39.6px; }
/* Gap between the Finnish intro and the English summary: 17.6 → +20 % → +30 % = 27.46px */
.v2-intro .v2-en { margin-top: 27.46px; }

/* Photo credits: same type as the home intro's English text (DM Sans 14px, sentence case) */
.v2-page .v2-portrait figcaption,
.v2-page .v2-portrait figcaption span {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
/* Photo credits: same size as the About page's English intro (13px) */
.v2-page .v2-portrait figcaption,
.v2-page .v2-portrait figcaption span { font-size: 13px; line-height: 1.6; }

/* About page: header + intro dark, key skills white, Osaaminen dark, footer white (logo strip stays white) */
.v2-page:has(.v2-about-intro) .v2-header,
.v2-page .v2-about-intro,
.v2-page .v2-about-expertise {
  --ink: #fff;
  --accent: #fff;
  color: #fff;
}
.v2-page .v2-about-intro,
.v2-page .v2-about-expertise { background: #221f11; }
.v2-page .v2-skills {
  --ink: #221f11;
  --accent: #221f11;
  background: #fff;
  color: #221f11;
}

/* About: logo strip now sits under the key skills (both white), before the dark Osaaminen */
.v2-about-intro { padding-bottom: 110px; }
.v2-page .v2-skills { padding-bottom: 100px; }
.v2-clients { padding-bottom: 110px; }
.v2-about-expertise { padding-bottom: 110px; }
@media (max-width: 560px) {
  .v2-about-intro { padding-bottom: 72px; }
  .v2-page .v2-skills { padding-bottom: 64px; }
  .v2-clients { padding-bottom: 72px; }
  .v2-about-expertise { padding-bottom: 72px; }
}

/* Key skills heading: same size as "Hauska tavata!" (Bricolage 24px), Finnish heavy, English thin */
.v2-page .v2-skills .v2-kicker {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}
.v2-page .v2-skills .v2-kicker span[lang] { margin-left: 0; font-weight: 200; letter-spacing: normal; }

/* Osaaminen hover term: same type as the Finnish captions (DM Sans 13px regular, line height 1.2) */

/* Home hero: soft S-shaped glow in tints of #221f11 plus fine grain (Jenni's explicit exception to the two-colour rule) */
.v2-page .v2-intro {
  position: relative;
  isolation: isolate;
  background: #221f11 url("images/texture/hero-light.jpg") center / 100% 100% no-repeat;
}
.v2-page .v2-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/texture/grain.svg") repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Soft glow + grain on every dark-brown area (same colours as the home hero; images/texture/, made by glow_backgrounds.py) */
.v2-page .v2-work,
.v2-page:has(.v2-intro) .v2-footer,
.v2-page .v2-about-intro,
.v2-page .v2-about-expertise,
.v2-page .v2-project {
  position: relative;
  isolation: isolate;
}
.v2-page .v2-work { background: #221f11 url("images/texture/glow-work.jpg") center top / 100% auto repeat-y; }
.v2-page:has(.v2-intro) .v2-footer { background: #221f11 url("images/texture/glow-footer.jpg") center / 100% 100% no-repeat; }
.v2-page .v2-about-intro { background: #221f11 url("images/texture/glow-about.jpg") center / 100% 100% no-repeat; }
.v2-page .v2-about-expertise { background: #221f11 url("images/texture/glow-expertise.jpg") center / 100% 100% no-repeat; }
.v2-page .v2-project { background: #221f11 url("images/texture/glow-project.jpg") center top / 100% auto repeat-y; }
.v2-page .v2-work::before,
.v2-page:has(.v2-intro) .v2-footer::before,
.v2-page .v2-about-intro::before,
.v2-page .v2-about-expertise::before,
.v2-page .v2-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/texture/grain.svg") repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Home project cards: no hover decoration on the name */
.v2-page a.v2-card:hover .v2-title { color: var(--ink); text-decoration: none; }

/* Home: portrait at 90 % so the melting title below has more room */
@media (min-width: 901px) {
  /* the freed height stays as space above the title: 10 % of the old height = 15.13 % of the column width (portrait is 1167:1766) */
  .v2-page .v2-intro .v2-portrait { width: 90%; margin-bottom: 15.13%; }
}

/* Photo credit: vertical (bottom to top) on the portrait's bottom-right corner, shown on hover */
@media (min-width: 901px) {
  .v2-page .v2-portrait figcaption {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: auto;
    right: 10px;
    padding: 0;
    background: none;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 0;
  }
  .v2-page .v2-portrait:hover figcaption { opacity: 1; }
}


/* Home: "Graphic Designer" lifted 28px (16 + 12) from where it sat on the bottom edge */
.v2-page .v2-bigtitle { transform: translateY(-0.122em); margin: calc(0.122em + 24px) 0 28px; } /* lift and gap are real space, so the title never overlaps the text or portrait above */

/* Home project images: slight zoom on hover, blur around the cursor (main.js adds a masked, more blurred copy) */
.v2-card .v2-img, .v2-card .v2-logo-box { position: relative; }
.v2-card .v2-img > img, .v2-card .v2-logo-box > img { transition: filter 0.3s ease, transform 0.3s ease; }
.v2-card:hover .v2-img > img, .v2-card:hover .v2-logo-box > img { transform: scale(1.04); }
.v2-hblur {
  position: absolute !important;
  inset: 0;
  aspect-ratio: auto !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-mask-image: radial-gradient(circle var(--reach, 150px) at var(--mx, 50%) var(--my, 50%), #000 0, transparent 100%);
  mask-image: radial-gradient(circle var(--reach, 150px) at var(--mx, 50%) var(--my, 50%), #000 0, transparent 100%);
}
.v2-card:hover .v2-hblur { opacity: 1; }
.v2-card .v2-hblur > img, .v2-card:hover .v2-hblur > img { filter: blur(12px); transform: scale(1.04); }
/* The same hover for cards whose picture sits inside a <picture> element (the ones with a separate phone image): the rules above
   only reach an <img> that is a direct child of the frame */
.v2-card .v2-img > picture > img { transition: filter 0.3s ease, transform 0.3s ease; }
.v2-card:hover .v2-img > picture > img { transform: scale(1.04); }
.v2-card .v2-hblur > picture > img, .v2-card:hover .v2-hblur > picture > img { filter: blur(12px); transform: scale(1.04); }

/* Page-wide titles melt on hover (main.js): the filtered copy fades in over the sharp text and then stays still */
.v2-melt-title { position: relative; }
.v2-melt-sharp { display: block; transition: opacity 0.9s ease; }
.v2-melt-copy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
.v2-melt-title.is-melting .v2-melt-copy { opacity: 1; }
.v2-melt-title.is-melting .v2-melt-sharp { opacity: 0; }


/* Portraits: slight zoom on hover, blur around the cursor (main.js wraps the image and adds a masked, blurred copy) */
.v2-pwrap { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.v2-about-portrait .v2-pwrap { height: 100%; }
.v2 .v2-pwrap > img { border-radius: 0; transition: transform 0.3s ease; }
.v2-portrait:hover .v2-pwrap > img { transform: scale(1.04); }
.v2-pwrap .v2-hblur > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: blur(12px); transform: scale(1.04); }
.v2-portrait:hover .v2-hblur { opacity: 1; }
@media (max-width: 900px) { .v2-about-portrait .v2-pwrap { height: auto; } }
/* Photo credit small (9px) */
.v2-page .v2-portrait figcaption,
.v2-page .v2-portrait figcaption span { font-size: 9px; }

/* Home intro on mid-size screens: wider text column, portrait moves to the right edge */
@media (min-width: 901px) and (max-width: 1300px) {
  .v2-page .v2-intro-text { grid-column: 1 / 8; }
  .v2-page .v2-intro .v2-portrait { grid-column: 9 / 13; }
}

/* Home intro on desktop: exactly one screen tall, "Graphic Designer" always at the bottom of the view.
   The portrait takes the height that is left (keeping its proportions); text scales down on short windows. */
@media (min-width: 901px) {
  .v2-page .v2-intro {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: clamp(72px, 12vh, 130px);
    align-items: stretch;
  }
  .v2-page .v2-intro-text { grid-row: 1; align-self: start; padding-top: 0; }
  .v2-page .v2-intro .v2-lead { font-size: clamp(17px, min(2.3vw, 4.2vh), 32px); margin-bottom: clamp(8px, 1.9vh, 17.6px); }
  .v2-page .v2-intro .v2-en { font-size: clamp(12px, 2.3vh, 14px); margin-top: clamp(10px, 3vh, 27.46px); margin-bottom: clamp(14px, 4.2vh, 39.6px); }
  .v2-page .v2-intro .v2-contact { font-size: clamp(13px, 2.6vh, 16px); }
  .v2-page .v2-intro .v2-portrait { grid-row: 1; position: relative; width: auto; height: auto; margin: 0; min-height: 0; align-self: stretch; }
  .v2-page .v2-intro .v2-portrait { container-type: size; }
  /* as big as the space allows without cropping: limited by the column width or the free height, whichever is smaller */
  .v2-page .v2-intro .v2-portrait .v2-pwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: min(100cqw, 100cqh * 1167 / 1766);
    height: min(100cqh, 100cqw * 1766 / 1167);
  }
  .v2-page .v2-intro .v2-portrait .v2-pwrap > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .v2-page .v2-bigtitle { grid-row: 2; align-self: end; }
}
@media (min-width: 901px) and (max-width: 1300px) {
  .v2-page .v2-intro .v2-portrait .v2-pwrap { left: auto; right: 0; }
}

/* About: portrait.jpg (1261 × 1776, cropped by Jenni) in its own proportions */
.v2-about-portrait img,
.v2-about-portrait .v2-pwrap > img { aspect-ratio: 1261 / 1776; }
.v2-about-portrait img,
.v2-about-portrait .v2-pwrap { height: auto; }

/* Osaaminen: same hover as the project images (slight zoom, blur around the cursor);
   the caption switches from Finnish to English (both share one grid cell, so nothing jumps) */
.v2-expertise-grid .v2-img { position: relative; }
.v2-expertise-grid .v2-img > img { transition: transform 0.3s ease; }
.v2-expertise-grid .v2-exp-item:hover .v2-img > img { transform: scale(1.04); }
.v2-expertise-grid .v2-hblur > img, .v2-expertise-grid .v2-exp-item:hover .v2-hblur > img { width: 100%; height: 100%; object-fit: cover; filter: blur(12px); transform: scale(1.04); }
.v2-expertise-grid .v2-exp-item:hover .v2-hblur { opacity: 1; }
.v2-expertise-grid .v2-title { display: grid; }
.v2-cap-fi, .v2-cap-en { grid-area: 1 / 1; }
.v2-cap-en { visibility: hidden; }
.v2-expertise-grid .v2-exp-item:hover .v2-cap-fi, .v2-expertise-grid .v2-exp-item:focus-visible .v2-cap-fi { visibility: hidden; }
.v2-expertise-grid .v2-exp-item:hover .v2-cap-en, .v2-expertise-grid .v2-exp-item:focus-visible .v2-cap-en { visibility: visible; }


/* Works page (duunit/): dark glow section with the page-wide "Duunit /Works" title, the filter and every project */
.v2-page .v2-works-page { padding-top: 120px; }
.v2-page .v2-works-title {
  display: block;
  margin: 0 0 56px;
  transform: none;
  font-size: calc((100vw - 2 * var(--gutter)) / 4.913); /* "Duunit /Works" fills the row (Fraunces italic + Geist Pixel) */
}
.v2-page .v2-works-page .v2-work-head { margin-bottom: 40px; }
/* Footer on the works page is dark like on the home page */
.v2-page:has(.v2-works-page) .v2-footer {
  --ink: #fff;
  --accent: #fff;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #221f11 url("images/texture/glow-footer.jpg") center / 100% 100% no-repeat;
}
.v2-page:has(.v2-works-page) .v2-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/texture/grain.svg") repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@media (max-width: 560px) { .v2-page .v2-works-page { padding-top: 96px; } }
/* Works page logo tiles: logo at its normal size in the middle, not stretched like a photo */
.v2-page .v2-works-page .v2-logo-box > img,
.v2-page .v2-works-page .v2-logo-box .v2-hblur > img { width: 46%; height: auto; object-fit: contain; }
.v2-page .v2-works-page .v2-logo-box .v2-hblur { display: flex; align-items: center; justify-content: center; }
/* Works page: title heavy first, thin second; four projects side by side on desktop */
.v2-page .v2-works-title b { font-weight: 800; }
.v2-page .v2-works-title span[lang] { font-weight: 200; }
@media (min-width: 901px) { .v2-page .v2-works-page .v2-work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1100px) { .v2-page .v2-works-page .v2-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-page .v2-card .v2-title { overflow-wrap: break-word; }
/* Project names under the images (home + works page): regular 400 */
.v2-page .v2-card .v2-title { font-weight: 400; }
/* Works page footer: "Tehdäänkö lisää?" fills the row like "Sanotaanko moi?" */
.v2-page .v2-bigname-works { font-size: calc((100vw - 2 * var(--gutter)) / 5.716); }

/* ===== Site-wide grid (version 2): narrow 16px column gaps, 24px page margin (phones 10px / 16px) ===== */
.v2-page { --gutter: 24px; --gap: 16px; }
@media (max-width: 560px) { .v2-page { --gutter: 16px; --gap: 10px; } }

.v2-page .v2-intro,
.v2-page .v2-about-intro,
.v2-page .v2-project-intro { column-gap: var(--gap); }
.v2-page .v2-latest-grid,
.v2-page .v2-work-grid { gap: 40px var(--gap); }
.v2-page .v2-services,
.v2-page .v2-quotes-grid,
.v2-page .v2-footer-cols { column-gap: var(--gap); }
.v2-page .v2-expertise-grid { gap: 28px var(--gap); }
.v2-page .v2-project-media { gap: var(--gap); }
.v2-page .v2-project-media + .v2-project-media { margin-top: var(--gap); }
@media (max-width: 560px) {
  .v2-page .v2-latest-grid,
  .v2-page .v2-work-grid { gap: 32px var(--gap); }
  .v2-page .v2-expertise-grid { gap: 24px var(--gap); }
}

/* Image corners: a small rounding in the spirit of the Geist Pixel title word's slightly rounded pixels */
.v2,
.v2-expertise-grid { --radius: 2px; }

/* Osaaminen: nine thumbnails per row on wide screens, captions centred,
   and the heading page-wide and centred like the other big titles (with the melt hover from main.js) */
@media (min-width: 1301px) { .v2-page .v2-expertise-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.v2-page .v2-expertise-grid .v2-exp-item { text-align: center; }
.v2-page .v2-expertise-grid .v2-title { justify-items: center; }
.v2-page .v2-about-expertise .v2-heading {
  text-align: center;
  white-space: nowrap;
  font-size: calc((100vw - 2 * var(--gutter)) / 4.523); /* "The Full Menu" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  font-variation-settings: "opsz" 96;
  margin-bottom: 48px;
}

/* Key skills heading: page-wide like the other big titles (Finnish 800, English 200; melt hover from main.js) */
.v2-page .v2-skills .v2-kicker {
  white-space: nowrap;
  font-size: calc((100vw - 2 * var(--gutter)) / 5.649); /* "My superpowers" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  font-variation-settings: "opsz" 96;
  margin-bottom: 48px;
}

/* About: "Vuosien varrelta /Over the years" — white section under Osaaminen with a page-wide heading and the logo strip */
.v2-page .v2-skills { padding-bottom: 120px; }
.v2-page .v2-about-clients { padding: 110px 0 110px; background: #fff; color: #221f11; --ink: #221f11; }
.v2-page .v2-about-clients .v2-heading {
  margin: 0 var(--gutter) 64px;
  text-align: center;
  white-space: nowrap;
  font-size: calc((100vw - 2 * var(--gutter)) / 5.112); /* "The Name-Drop" fills the row (Fraunces italic + Geist Pixel) */
  line-height: 0.95;
  font-variation-settings: "opsz" 96;
}
.v2-page .v2-about-clients .v2-clients { padding-bottom: 0; }
@media (max-width: 560px) {
  .v2-page .v2-skills { padding-bottom: 72px; }
  .v2-page .v2-about-clients { padding: 72px 0; }
  .v2-page .v2-about-clients .v2-heading { margin-bottom: 40px; }
}
/* Footer on the About page is dark like on the home and works pages */
.v2-page:has(.v2-about-intro) .v2-footer {
  --ink: #fff;
  --accent: #fff;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #221f11 url("images/texture/glow-footer.jpg") center / 100% 100% no-repeat;
}
.v2-page:has(.v2-about-intro) .v2-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/texture/grain.svg") repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Over the years: logo row / heading / logo row, with equal white space between everything */
.v2-page .v2-about-clients { --space: 88px; padding: var(--space) 0; }
/* the letters sit lower in their line than the box suggests, so the top margin is trimmed by 0.1em to make the visible white equal */
.v2-page .v2-about-clients .v2-heading { margin: calc(var(--space) - 0.106em) var(--gutter) calc(var(--space) - 0.015em); }
.v2-page .v2-about-clients .v2-clients.is-reverse .v2-clients-track { animation-direction: reverse; }
@media (max-width: 560px) { .v2-page .v2-about-clients { --space: 48px; } }
/* Skills list: weights swapped — odd items thin (200), even items heavy (800) */
.v2-page .v2-skill:nth-child(odd) { font-weight: 200; }
.v2-page .v2-skill:nth-child(even) { font-weight: 800; }

/* The Full Menu: English captions only, round thumbnails, at 90 % of their original sizes (what they were when the grid had 9 / 7 / 5 / 3 columns), centred above their caption */
.v2-page .v2-expertise-grid .v2-img { border-radius: 50%; width: 90%; margin-left: auto; margin-right: auto; }
.v2-page .v2-expertise-grid .v2-img > img { border-radius: 50%; }
/* The Full Menu thumbnails only illustrate: not clickable */
.v2-page .v2-expertise-grid .v2-exp-item { display: block; cursor: default; }

/* Logo strip: half the space between logos, logos 20 % bigger */
.v2-clients-run { gap: 22px; padding-right: 22px; }
.v2-clients-run img { height: calc(28.8px * var(--s, 1)); max-width: calc(132px * var(--s, 1)); }
@media (max-width: 560px) {
  .v2-clients-run { gap: 14px; padding-right: 14px; }
  .v2-clients-run img { height: calc(24px * var(--s, 1)); max-width: calc(103px * var(--s, 1)); }
}
/* The Name-Drop: half the white at the section's top and bottom edges (gaps around the heading unchanged) */
.v2-page .v2-about-clients { padding: calc(var(--space) / 2) 0; }

/* Logo strip: keeps moving on hover */
.v2-page .v2-clients { position: relative; }

/* Logos another 20 % bigger; the section's outer margins stay, the logos come closer to the heading instead */
.v2-clients-run img { height: calc(34.56px * var(--s, 1)); max-width: calc(158.4px * var(--s, 1)); }
.v2-page .v2-about-clients .v2-heading { margin-top: calc(var(--space) - 0.106em - 5.76px); margin-bottom: calc(var(--space) - 0.015em - 5.76px); }
@media (max-width: 560px) {
  .v2-clients-run img { height: calc(28.8px * var(--s, 1)); max-width: calc(123.6px * var(--s, 1)); }
  .v2-page .v2-about-clients .v2-heading { margin-top: calc(var(--space) - 0.106em - 4.8px); margin-bottom: calc(var(--space) - 0.015em - 4.8px); }
}
/* Logos 20 % bigger again (41.5px), 5 % more space between them; outer margins kept, the extra comes from the gap to the heading */
.v2-clients-run { gap: 23.1px; padding-right: 23.1px; }
.v2-clients-run img { height: calc(41.47px * var(--s, 1)); max-width: calc(190.08px * var(--s, 1)); }
.v2-page .v2-about-clients .v2-heading { margin-top: calc(var(--space) - 0.106em - 12.67px); margin-bottom: calc(var(--space) - 0.015em - 12.67px); }
@media (max-width: 560px) {
  .v2-clients-run { gap: 14.7px; padding-right: 14.7px; }
  .v2-clients-run img { height: calc(34.56px * var(--s, 1)); max-width: calc(148.32px * var(--s, 1)); }
  .v2-page .v2-about-clients .v2-heading { margin-top: calc(var(--space) - 0.106em - 10.56px); margin-bottom: calc(var(--space) - 0.015em - 10.56px); }
}
@media (min-width: 561px) { .v2-clients-run { gap: 26px; padding-right: 26px; } }

/* The Name-Drop: four logo rows (two above, two below the heading), taller white area */
.v2-page .v2-about-clients { padding: 120px 0; }
.v2-page .v2-clients-group .v2-clients + .v2-clients { margin-top: 28px; }
@media (max-width: 560px) {
  .v2-page .v2-about-clients { padding: 64px 0; }
  .v2-page .v2-clients-group .v2-clients + .v2-clients { margin-top: 18px; }
}
@media (min-width: 561px) { .v2-clients-run { gap: 30px; padding-right: 30px; } }

/* Photo tiles in Latest projects are upright like the logo tiles */
.v2-latest .v2-img { aspect-ratio: 3 / 4; }
/* Films on project pages: rounded like the images, black behind the player */
.v2-project-media .v2-film { background: #000; }

/* Project pages: the English summary now sits under the Finnish text (no longer bottom-aligned with it) */
.v2-page .v2-project-text { align-self: start; }
.v2-page .v2-project-text .v2-project-summary { margin: 40px 0 0; padding: 0; max-width: none; }
.v2-page .v2-project-text .v2-project-summary p { margin: 0; }
@media (max-width: 900px) { .v2-page .v2-project-text .v2-project-summary { margin-top: 28px; } }

/* Project intro: the first line of the body text shares its x-height with the title's first line.
   Title x-height top sits 0.4458 × its font size into the line; the body's sits 10.48px into its line. */
@media (min-width: 901px) {
  .v2-page .v2-project-text { margin-top: calc(clamp(31.05px, 4.455vw, 68.4px) * 0.4458 - 10.48px); }
}
.v2-page .v2-project-text strong { font-weight: 700; }

/* Photo credit on a project image: same as the portrait credit — vertical, bottom-right corner, on hover */
.v2-media-credit { position: relative; margin: 0; }
.v2-media-credit figcaption {
  position: absolute;
  bottom: 12px;
  right: 10px;
  color: #fff;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.v2-media-credit:hover figcaption { opacity: 1; }
@media (hover: none) { .v2-media-credit figcaption { opacity: 1; } }

/* Desktop: the slash and the thin English part of project titles start on a new line */
@media (min-width: 901px) {
  .v2-page .v2-project-lead .v2-heading .v2-en { display: block; }
}
@media (max-width: 900px) { .v2-desk-br { display: none; } }
/* The Full Menu: a soft empty tile for items whose picture isn't made yet */
.v2-expertise-grid .v2-img-empty { display: block; aspect-ratio: 1 / 1; background: color-mix(in srgb, currentColor 10%, transparent); }

/* ===== Phones only ===== */
@media (max-width: 760px) {
  /* Kyliltä kuultua: quotes and their names centred */
  .v2-page .v2-quotes blockquote,
  .v2-page .v2-quotes figcaption { text-align: center; }
  /* No hover blur or zoom on images (there is no hover on a touch screen) */
  .v2-page .v2-hblur { display: none; }
  .v2-page .v2-card:hover .v2-img > img,
  .v2-page .v2-card:hover .v2-logo-box > img,
  .v2-page .v2-expertise-grid .v2-exp-item:hover .v2-img > img,
  .v2-page .v2-portrait:hover .v2-pwrap > img { transform: none; }
  /* Home: "Graphic Designer" at the top, above the body text */
  .v2-page .v2-intro .v2-bigtitle { order: -1; transform: none; margin: 0 0 32px; }
}
/* Phones: the slash part of headings (/Latest projects, /Graphic design …) always starts on a new line */
@media (max-width: 760px) {
  .v2-page .v2-project-lead .v2-heading .v2-en,
  .v2-page .v2-latest .v2-heading .v2-en,
  .v2-page .v2-work .v2-heading .v2-en { display: block; }
}
/* About logo strip: two rows per group on desktop, three per group on phones (build.py makes both) */
.v2-page .v2-clients-phone { display: none; }
@media (max-width: 760px) {
  .v2-page .v2-clients-desktop { display: none; }
  .v2-page .v2-clients-phone { display: block; }
}
/* "Next project" link: just "Seuraava" on phones */
.v2-nav-short { display: none; }
@media (max-width: 760px) {
  .v2-nav-long { display: none; }
  .v2-nav-short { display: inline; }
}
/* Phones: logo rows at 70 % of their earlier size (logos, gaps between logos and gaps between rows) */
@media (max-width: 760px) {
  .v2-page .v2-clients-phone .v2-clients-run { gap: 21px; padding-right: 21px; }
  .v2-page .v2-clients-phone .v2-clients-run img { height: calc(29.03px * var(--s, 1)); max-width: calc(133.06px * var(--s, 1)); }
  .v2-page .v2-clients-phone .v2-clients + .v2-clients { margin-top: 19.6px; }
}
@media (max-width: 560px) {
  .v2-page .v2-clients-phone .v2-clients-run { gap: 10.29px; padding-right: 10.29px; }
  .v2-page .v2-clients-phone .v2-clients-run img { height: calc(24.19px * var(--s, 1)); max-width: calc(103.82px * var(--s, 1)); }
  .v2-page .v2-clients-phone .v2-clients + .v2-clients { margin-top: 12.6px; }
}
/* Phones: project hero images taller — 16 % of the picture is cropped off each side (--ar is set per image) */
@media (max-width: 760px) {
  .v2-page img.v2-project-hero { aspect-ratio: calc(var(--ar, 1.7778) * 0.68); height: auto; object-fit: cover; }
}
/* Phones: the home portrait at half width, aligned right */
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-portrait { width: 50%; justify-self: end; margin-left: auto; }
}
/* Phones, home: contact details below the portrait; the portrait keeps its rounded corners and the photo credit
   runs bottom to top just outside its right edge, starting from the bottom */
@media (max-width: 760px) {
  .v2-page .v2-intro-text { display: contents; }
  .v2-page .v2-intro-text > * { grid-column: 1 / -1; }
  .v2-page .v2-intro .v2-portrait { order: 1; }
  .v2-page .v2-intro .v2-contact { order: 2; margin: 28px 0 40px; }
  .v2-page .v2-intro .v2-pwrap { overflow: visible; border-radius: 0; }
  .v2-page .v2-intro .v2-pwrap > img { border-radius: var(--radius); }
  .v2-page .v2-intro .v2-portrait figcaption {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 100%;
    right: auto;
    margin-left: 2px; /* fits in the 16 px page margin */
    padding: 0;
    background: none;
    white-space: nowrap;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 1;
    border-radius: 0;
  }
}
/* Phones, home: the English summary on the left of the portrait, tops aligned; the portrait a little narrower so
   the vertical photo credit has room to breathe */
@media (max-width: 760px) {
  .v2-page .v2-intro { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .v2-page .v2-intro .v2-en { order: 1; grid-column: 1; align-self: start; margin: 23.2px 0 0; } /* 4.8 px higher: the capital letters' tops meet the portrait's top */
  .v2-page .v2-intro .v2-portrait { order: 1; grid-column: 2; align-self: start; justify-self: start; width: 89%; margin: 28px 0 0; }
  .v2-page .v2-intro .v2-portrait figcaption { margin-left: 6px; }
}
/* Phones: the home services list (Brand design, Graphic design, Package design, Art direction) is hidden */
@media (max-width: 760px) {
  .v2-page .v2-services { display: none; }
}
/* Phones, Kyliltä kuultua: only the line under the heading stays (the first quote's top line) */
@media (max-width: 760px) {
  .v2-page .v2-quotes figure + figure { border-top: 0; }
}
/* The Full Menu: the last tile, "And much more" on three lines sized to make a round block the size of the
   picture circles (heavy "And", thin "much more"), always in the melted style (build.py) */
.v2-expertise-grid .v2-exp-more .v2-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: none; overflow: visible; }
.v2-more-ring { display: block; width: 80%; height: 80%; overflow: visible; } /* 20 % smaller, centred in the tile */
.v2-more-ring text {
  fill: currentColor;
  font-family: var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: 0;
}
/* About: the lead text now sits above the Finnish body text, with a gap before the body */
.v2-page .v2-about-fi .v2-about-quote { margin: 0 0 32px; }
@media (max-width: 760px) { .v2-page .v2-about-fi .v2-about-quote { margin-bottom: 24px; } }
/* "And much more": sharp text; on hover the melted copy fades in over it, as on the big titles */
.v2-more-ring g { transition: opacity 0.9s ease; }
.v2-more-ring .v2-more-melted { opacity: 0; }
@media (hover: hover) { /* touch screens keep it sharp, even after a tap */
  .v2-exp-more:hover .v2-more-ring .v2-more-melted { opacity: 1; }
  .v2-exp-more:hover .v2-more-ring .v2-more-sharp { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .v2-exp-more:hover .v2-more-ring .v2-more-melted { opacity: 0; } .v2-exp-more:hover .v2-more-ring .v2-more-sharp { opacity: 1; } }
/* Hover blur: blurring mixes neighbouring colours into a greyer, darker average, so the blurred copy gets
   extra saturation and a touch of contrast to keep the picture's own colours */
.v2-page .v2-card .v2-hblur > img,
.v2-page .v2-card:hover .v2-hblur > img,
.v2-page .v2-pwrap .v2-hblur > img,
.v2-page .v2-expertise-grid .v2-hblur > img,
.v2-page .v2-expertise-grid .v2-exp-item:hover .v2-hblur > img { filter: blur(12px) saturate(1.15) contrast(1.05); }
/* Desktop About: the portrait runs down to the bottom of the last contact pill; the extra height is cropped
   from the bottom-right corner (the top-left of the photo stays in place) */
@media (min-width: 901px) {
  .v2-page .v2-about-portrait { grid-row: 2 / span 2; align-self: stretch; }
  .v2-page .v2-about-mid { grid-row: 2 / span 2; }
  .v2-page .v2-about-portrait .v2-pwrap { height: 100%; }
  .v2-page .v2-about-portrait img,
  .v2-page .v2-about-portrait .v2-pwrap > img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 45% top; } /* the face sits about 45 % across the photo, so it stays near the middle when the sides are cropped */
}
/* Narrower desktops: a wider portrait (5 of 12 columns, right edge where it is on wide screens) and a narrower
   English column on its left, the English text ending level with the last contact pill */
@media (min-width: 901px) and (max-width: 1280px) {
  .v2-page .v2-about-portrait { grid-column: 4 / 9; }
  .v2-page .v2-about-mid { grid-column: 1 / 4; }
}
/* The Full Menu: each caption in its own outlined pill (same line as the contact pills), centred under its picture */
.v2-page .v2-expertise-grid .v2-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 0.5em 0.95em;
  border: 1.2px solid currentColor;
  border-radius: 999px;
  text-wrap: balance;
}
/* Home services: no top lines; each heading sits between heavy lenticular brackets (like 【Labs】), drawn as
   masks in the text colour: flat outer side, the inner side cut by a circular arc
   (measured from Jenni's reference: width 38.5 % of the height, 24 % of the width thick at the middle) */
.v2-page .v2-services > div { border-top: 0; padding-top: 0; }
.v2-page .v2-services h3::before,
.v2-page .v2-services h3::after,
.v2-page .v2-quotes figcaption::before,
.v2-page .v2-quotes figcaption::after,
.v2-page .v2-bk {
  content: "";
  display: inline-block;
  width: 0.331em; /* 38.5 % of the height, as in the reference */
  height: 0.86em;
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: var(--bracket) center / 100% 100% no-repeat;
  mask: var(--bracket) center / 100% 100% no-repeat;
}
.v2-page .v2-services h3::before,
.v2-page .v2-quotes figcaption::before,
.v2-page .v2-bk-l {
  --bracket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.5 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H38.5V0.7A56.1 56.1 0 0 0 38.5 99.3V100H0Z'/%3E%3C/svg%3E");
  margin-right: 0.08em;
}
.v2-page .v2-services h3::after,
.v2-page .v2-quotes figcaption::after,
.v2-page .v2-bk-r {
  --bracket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.5 100' preserveAspectRatio='none'%3E%3Cpath d='M38.5 0H0V0.7A56.1 56.1 0 0 1 0 99.3V100H38.5Z'/%3E%3C/svg%3E");
  margin-left: 0.08em;
}
/* Kyliltä kuultua: no lines; each quote opens with a slash and the name sits in its own outlined pill */
.v2-page .v2-quotes figure,
.v2-page .v2-quotes figure + figure { border-top: 0; padding-top: 0; }
.v2-page .v2-quotes figcaption {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.45em 0.9em;
  border: 1.2px solid currentColor;
  border-radius: 999px;
}
@media (max-width: 760px) { .v2-page .v2-quotes figcaption { margin-left: auto; margin-right: auto; } }
/* Kyliltä kuultua: names at 16px, the size of the service lists, contact details and footer on the home page */
.v2-page .v2-quotes figcaption { font-size: 16px; }
/* The Full Menu pill captions: same size as the English line under My superpowers (12px) */
.v2-page .v2-expertise-grid .v2-title { font-size: 12px; letter-spacing: 0.02em; }
/* Kyliltä kuultua: the names in the same lenticular brackets instead of pills */
.v2-page .v2-quotes figcaption { border: 0; border-radius: 0; padding: 0; }
/* About contacts: no line on top */
.v2-page .v2-about-contact { margin-top: 36px; padding-top: 0; border-top: 0; line-height: 2; }
.v2-page .v2-about-contact a { display: inline-block; }
/* Home title: lenticular brackets around "Designer" (brackets above); the title still fills the row */
.v2-page .v2-intro .v2-bigtitle { font-size: calc((100vw - 2 * var(--gutter)) / 7.773); }
/* Big titles: the heavy word sits in lenticular brackets (brackets above) */
.v2-page .v2-bracketed { font-weight: 800; white-space: nowrap; }
/* About contacts: a right-pointing arrow in an outlined circle in front of each contact */
.v2-page .v2-about-contact li { display: flex; align-items: center; gap: 0.55em; }
.v2-page .v2-about-contact .v2-arrow { width: 1.35em; height: 1.35em; flex: none; }
/* Home contacts: same as About — a right-pointing arrow in an outlined circle, no underline (underline on hover) */
.v2-page .v2-intro .v2-contact { list-style: none; padding: 0; }
.v2-page .v2-intro .v2-contact li { display: flex; align-items: center; gap: 0.55em; }
.v2-page .v2-intro .v2-contact li + li { margin-top: 0.35em; }
.v2-page .v2-intro .v2-contact a { border-bottom: 0; }
.v2-page .v2-intro .v2-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v2-page .v2-intro .v2-contact .v2-arrow { width: 1.35em; height: 1.35em; flex: none; }
/* My superpowers: no slashes; the heavy skills sit in lenticular brackets (build.py bracketed()) */
.v2-page .v2-skills-text .v2-skill::before,
.v2-page .v2-skills-text .v2-skill + .v2-skill::before,
.v2-page .v2-skills-text .v2-skill::after { content: none; }
.v2-nowrap { white-space: nowrap; }
/* All version-2 pages: Fraunces as the display face (body.v2-type) */
.v2-page.v2-type { --display: "Fraunces", serif; }
.v2-page.v2-type .v2-intro .v2-bigtitle { font-size: calc((100vw - 2 * var(--gutter)) / 5.796); }
.v2-page.v2-type .v2-quotes .v2-heading { font-size: calc((100vw - 2 * var(--gutter)) / 4.809); }
.v2-page.v2-type .v2-bigname { font-size: calc((100vw - 2 * var(--gutter)) / 5.459); }
/* Home page (Fraunces): what was bold is Fraunces 100; what was thin is Fraunces 100 italic */
.v2-page.v2-type .v2-kicker.v2-heading,
.v2-page.v2-type .v2-services h3,
.v2-page.v2-type .v2-quotes figcaption { font-weight: 100; font-style: normal; }
.v2-page.v2-type .v2-bigtitle b,
.v2-page.v2-type .v2-bigname b,
.v2-page.v2-type .v2-heading .v2-en,
.v2-page.v2-type .v2-quotes blockquote { font-weight: 100; font-style: italic; }
/* Home page: no lenticular brackets anywhere */
.v2-page.v2-type .v2-bracketed::before,
.v2-page.v2-type .v2-bracketed::after,
.v2-page.v2-type .v2-services h3::before,
.v2-page.v2-type .v2-services h3::after,
.v2-page.v2-type .v2-quotes figcaption::before,
.v2-page.v2-type .v2-quotes figcaption::after,
.v2-page.v2-type .v2-bk { display: none; }
/* Home page: project names in Fraunces Light 300 */
.v2-page.v2-type .v2-card .v2-title { font-weight: 300; }
/* Home page: intro text in Fraunces ExtraLight 200, about 12 % bigger */
.v2-page.v2-type .v2-intro .v2-lead { font-weight: 200; font-size: 27px; }
@media (min-width: 901px) {
  .v2-page.v2-type .v2-intro .v2-lead { font-size: clamp(19px, min(2.58vw, 4.7vh), 36px); }
}
.v2-page.v2-type.v2-type .v2-intro .v2-bigtitle { font-size: calc((100vw - 2 * var(--gutter)) / 5.928); } /* refit for Geist Pixel */
/* Big titles everywhere: the thin part in Fraunces 100 italic, the heavy part in Geist Pixel (Element Shape 7.3,
   between Square 1 and Circle 20) at the same x-height, no brackets. Self-hosted variable Geist Pixel from
   vercel/geist-font (OFL), subset to Latin. */
@font-face {
  font-family: "Geist Pixel VF";
  src: url("fonts/GeistPixel-ELSH.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
.v2-page :is(.v2-bigtitle, .v2-about-title, .v2-bigname, .v2-heading, .v2-kicker) .v2-thin {
  font-family: "Fraunces", serif;
  font-weight: 100;
  font-style: italic;
}
.v2-page :is(.v2-bigtitle, .v2-about-title, .v2-bigname, .v2-heading, .v2-kicker) .v2-bracketed {
  font-family: "Geist Pixel VF", monospace;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "ELSH" 7.3;
  font-size: 0.8152em; /* x-height matched to the thin part (Fraunces 100 italic 0.434 em, Geist Pixel 0.532 em) */
}
/* All pages (Fraunces): the remaining heavy texts become Fraunces 100, the thin ones Fraunces 100 italic */
.v2-page.v2-type .v2-about-quote p,
.v2-page.v2-type .v2-project-lead .v2-heading,
.v2-page.v2-type .v2-skills-text .v2-skill:nth-child(even),
.v2-page.v2-type .v2-skills-text .v2-skill:nth-child(even) .v2-nowrap,
.v2-page.v2-type .v2-more-ring text[font-weight="800"] { font-weight: 100; font-style: normal; }
.v2-page.v2-type .v2-skills-text .v2-skill:nth-child(odd),
.v2-page.v2-type .v2-project-nav a,
.v2-page.v2-type .v2-skills .v2-kicker .v2-thin,
.v2-page.v2-type .v2-more-ring text[font-weight="200"] { font-weight: 100; font-style: italic; }
.v2-page.v2-type .v2-bigname-works { font-size: calc((100vw - 2 * var(--gutter)) / 5.669); } /* "Tehdäänkö lisää?" fills the row */
/* Home: "Uusimmat projektit", "Muita duuneja" and the services list (headings and items) in Fraunces Thin 100 */
.v2-page.v2-type .v2-latest .v2-kicker.v2-heading,
.v2-page.v2-type .v2-work .v2-kicker.v2-heading,
.v2-page.v2-type .v2-services h3,
.v2-page.v2-type .v2-services li { font-family: var(--display); font-weight: 100; font-style: normal; }
/* Home: "Uusimmat projektit" and "Muita duuneja" headings (both parts) in Fraunces ExtraLight 200 */
.v2-page.v2-type .v2-latest .v2-kicker.v2-heading,
.v2-page.v2-type .v2-work .v2-kicker.v2-heading,
.v2-page.v2-type .v2-latest .v2-kicker.v2-heading .v2-en,
.v2-page.v2-type .v2-work .v2-kicker.v2-heading .v2-en { font-weight: 200; }
/* Fraunces ExtraLight 200: intro text, project names and the service headings */
.v2-page.v2-type .v2-intro .v2-lead,
.v2-page.v2-type .v2-card .v2-title,
.v2-page.v2-type .v2-services h3 { font-weight: 200; }
/* Service headings (Brand design …) in Fraunces Light 300 */
.v2-page.v2-type .v2-services h3 { font-weight: 300; }
/* Service list items in Fraunces ExtraLight 200 */
.v2-page.v2-type .v2-services li { font-weight: 200; }
/* Header texts (name, Works, About) in Fraunces ExtraLight 200 */
.v2-page.v2-type .v2-logo,
.v2-page.v2-type .v2-nav a { font-weight: 200; }
/* Body text (DM Sans) in Light 300 */
.v2-page.v2-type { font-weight: 300; }
.v2-page.v2-type .v2-filters button,
.v2-page.v2-type figcaption,
.v2-page.v2-type figcaption span,
.v2-page.v2-type .v2-expertise-grid .v2-title { font-weight: 300; }
/* Kyliltä kuultua: the names like the project categories under the cards (DM Sans Light 300, 14px, with a slash) */
.v2-page.v2-type .v2-quotes figure figcaption {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}
.v2-page.v2-type .v2-quotes figure figcaption::before,
.v2-page.v2-type .v2-quotes figure figcaption::after { content: none; display: none; }
/* Section headings (Uusimmat projektit, Muita duuneja) and project page titles about 3.5 % bigger */
.v2-page.v2-type .v2-latest .v2-heading,
.v2-page.v2-type .v2-work .v2-heading,
.v2-page.v2-type .v2-project-lead .v2-heading { font-size: clamp(31.05px, 4.455vw, 68.4px); }

/* Muita duuneja: filter buttons sit with their bottom edge on the heading's baseline (bottom of the x-height) */
/* (from 1240px up, where the buttons fit on the same row as the heading) */
@media (min-width: 1240px) {
  .v2-page.v2-type .v2-work-head { align-items: flex-end; }
  .v2-page.v2-type .v2-work-head .v2-filters { margin-bottom: calc(clamp(31.05px, 4.455vw, 68.4px) * 0.1835); }
}

/* Quotes and their names 12px further below the Kyliltä kuultua heading */
.v2-page .v2-quotes .v2-quotes-grid { margin-top: 40px; }
@media (min-width: 761px) { .v2-page .v2-quotes .v2-quotes-grid { margin-top: 56px; } } /* desktop: more room below the y of Kyliltä */

/* Project page "next" link: thin SVG arrow instead of the heavy → character */
.v2-project-nav .v2-nav-arrow { width: 0.9em; height: 0.5em; margin-left: 0.08em; vertical-align: 0.02em; overflow: visible; }

/* Contact details (home top and About top) in Fraunces, same ExtraLight 200 as the lead text */
.v2-page.v2-type .v2-contact,
.v2-page.v2-type .v2-contact a,
.v2-page.v2-type .v2-about-contact,
.v2-page.v2-type .v2-about-contact a { font-family: "Fraunces", serif; font-weight: 200; font-style: normal; }

/* Home intro: Finnish text smaller (30px on wide screens, 24px on phones) */
.v2-page.v2-type .v2-intro .v2-lead { font-size: 24px; }
@media (min-width: 901px) {
  .v2-page.v2-type .v2-intro .v2-lead { font-size: clamp(16px, min(2.15vw, 3.92vh), 30px); }
}
/* Wide screens: the Finnish intro wraps at "näkyy / … graafista / … suunnittelu / … mutta sen / …" */
@media (min-width: 901px) {
  .v2-page.v2-type .v2-intro .v2-lead { max-width: 19.2em; }
}
/* …and the English line is never wider than the Finnish text */
@media (min-width: 901px) {
  .v2-page.v2-type .v2-intro .v2-en { max-width: calc(19.2 * clamp(16px, min(2.15vw, 3.92vh), 30px)); }
}

/* Home intro: contact details at the same size as the English text */
.v2-page .v2-intro .v2-contact { font-size: 14px; }
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-contact { font-size: clamp(12px, 2.3vh, 14px); }
}

/* Project names on the cards: 26px on wide screens */
@media (min-width: 761px) {
  .v2-page .v2-card .v2-title { font-size: 26px; }
}

/* Quotes: same size as the project names, in Fraunces Thin 100 italic */
.v2-page.v2-type .v2-quotes blockquote { font-size: 20px; font-weight: 100; font-style: italic; line-height: 1.25; }
@media (min-width: 761px) {
  .v2-page.v2-type .v2-quotes blockquote { font-size: 26px; }
}

/* Service headings (Brand design …): 30px on wide screens */
@media (min-width: 761px) {
  .v2-page .v2-services h3 { font-size: 30px; }
}

/* Footer small texts 14px everywhere, like the other small captions */
.v2-page .v2-footer-cols,
.v2-page .v2-footer-cols * { font-size: 14px; }
/* Line spacing 1.1 for project names and quotes */
.v2-page .v2-card .v2-title,
.v2-page.v2-type .v2-quotes blockquote { line-height: 1.1; }

/* Font settings made on the home page, carried over to the other pages */
.v2-page.v2-type .v2-project-lead .v2-heading,
.v2-page.v2-type .v2-project-lead .v2-heading .v2-en { font-weight: 200; }                 /* project titles like the home section headings */
.v2-page.v2-type .v2-about-quote p { font-weight: 200; }                                   /* About lead like the home intro */
@media (min-width: 901px) {
  .v2-page.v2-type .v2-about-quote p { font-size: clamp(16px, min(2.15vw, 3.92vh), 30px); }
}
.v2-page .v2-about-en p,
.v2-page .v2-project-summary p,
.v2-page .v2-project-credit { font-size: 14px; }                                           /* English texts and credits 14px */
.v2-page .v2-works-title .v2-bracketed,
.v2-page .v2-work .v2-bracketed { font-weight: 400; }                                      /* Geist Pixel at the same weight everywhere */

/* Footer line as thin as the link underlines (one device pixel on retina screens) */
.v2-page .v2-footer-cols { border-top-width: 0.5px; }
/* Header nav underline (Works, About) as thin as the footer line */
.v2-page .v2-nav a, .v2-page .v2-nav a:hover { text-decoration-thickness: 0.5px; }
/* Filter button outlines as thin as the footer line */
.v2-page .v2-filters button { border-width: 0.5px; }

/* Works and About: the big title's letter tops line up with where the home page content starts
   (home top padding + the intro text's own space above its capitals, minus the title's space above its capitals) */
@media (min-width: 901px) {
  .v2-page .v2-works-title { margin-top: 0; }
  .v2-page section:has(> .v2-works-title) { padding-top: calc(clamp(72px, 12vh, 130px) + 8px - 0.1118 * (100vw - 2 * var(--gutter)) / 4.913); }
  /* About: the title's baseline (bottom of the x-height) on the same line as the Duunit /Works title's */
  .v2-page .v2-about-intro { padding-top: calc(clamp(72px, 12vh, 130px) + 8px + 0.00167 * (100vw - 2 * var(--gutter))); }
}

/* Home: Graphic Designer a little higher (more room below it) */
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-bigtitle { margin-bottom: 44px; }
}

/* Home: portrait 5 % bigger, top-left corner stays put */
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-portrait .v2-pwrap { transform: scale(1.05); transform-origin: top left; }
}

/* The Full Menu captions: no pill, plain Fraunces ExtraLight 200 like the project names */
.v2-page.v2-type .v2-expertise-grid .v2-title {
  border: 0; border-radius: 0; padding: 0; background: none;
  font-family: "Fraunces", serif; font-weight: 200; font-style: normal; font-size: 16px; line-height: 1.1; letter-spacing: 0;
}

/* Contact arrow icons: never clip the circle edge (iPhone cut the bottom of the first one at fractional positions) */
.v2-page .v2-arrow { overflow: visible; }

/* Phones: project names a little bigger */
@media (max-width: 760px) {
  .v2-page .v2-card .v2-title { font-size: 22px; }
}
@media (max-width: 760px) {
  .v2-page.v2-type .v2-quotes blockquote { font-size: 22px; } /* phones: same size as the project names */
}
@media (max-width: 760px) {
  .v2-page.v2-type .v2-quotes blockquote { margin-bottom: 8px; } /* phones: name closer to its quote */
}

/* Phones: the top big title's baseline on the same line on Home, Works and About */
@media (max-width: 760px) {
  .v2-page section:has(> .v2-works-title) { padding-top: 99px; }
  .v2-page .v2-about-intro { padding-top: 108px; }
}

/* Screens with ordinary pixel density can't draw a 0.5px line (it disappears), so use 1px there */
@media (max-resolution: 1.5dppx) {
  .v2-page .v2-filters button { border-width: 1px; }
  .v2-page .v2-footer-cols { border-top-width: 1px; }
  .v2-page .v2-nav a, .v2-page .v2-nav a:hover { text-decoration-thickness: 1px; }
}

/* Filter buttons always drawn above the big title (its invisible melt layer reaches below it and hid
   the top edge of the buttons on iPhone once the title moved a little lower) */
.v2-page .v2-filters { position: relative; z-index: 2; }
/* Phones: the buttons land on fractional pixel positions (the title above scales with the screen width), where
   a hairline outline drops out on iPhone at the top or bottom edge — a full 1px outline always draws whole */
@media (max-width: 760px) {
  .v2-page .v2-filters button { border-width: 1px; }
}

/* Phones: Finnish body text on project pages and About at 15px */
@media (max-width: 760px) {
  .v2-page .v2-project-text > p,
  .v2-page .v2-about-fi > p { font-size: 15px; }
}

/* Phones: small texts on project pages (credit under the title, English text) and About's English text at 12px */
@media (max-width: 760px) {
  .v2-page .v2-about-en p,
  .v2-page .v2-project-summary p,
  .v2-page .v2-project-credit { font-size: 12px; }
}

/* Phones, About: the lead on the left and the portrait on the right, side by side; the rest below at full width */
@media (max-width: 760px) {
  .v2-page .v2-about-intro { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .v2-page .v2-about-intro .v2-about-fi { display: contents; }
  .v2-page .v2-about-intro .v2-about-fi > * { grid-column: 1 / -1; }
  .v2-page.v2-type .v2-about-intro .v2-about-fi > .v2-about-quote { grid-column: 1; grid-row: 2; align-self: start; }
  .v2-page.v2-type .v2-about-intro .v2-about-quote p { font-size: 18px; hyphens: none; -webkit-hyphens: none; }
  .v2-page .v2-about-intro .v2-about-portrait { grid-column: 2; grid-row: 2; align-self: start; margin: 0 0 24px; }
}

/* Project page quotes: the highlighted words in italic at the same weight as the rest, instead of bold */
.v2-page.v2-type .v2-project-quote blockquote :is(b, strong) { font-weight: inherit; font-style: italic; }

/* Project pages: "Roolini:" in the heading font (Fraunces ExtraLight 200), between body text and project names in size */
.v2-page.v2-type .v2-project-text strong {
  font-family: "Fraunces", serif; font-weight: 200; font-style: normal;
  font-size: 22px; line-height: 1.2; display: inline-block; margin-bottom: 6px;
}
@media (max-width: 760px) {
  .v2-page.v2-type .v2-project-text strong { font-size: 20px; }
}
.v2-page.v2-type .v2-project-text strong { font-style: italic; } /* "Vastuualueeni:" in italic */
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-en { line-height: 1.6; } /* phones: same line spacing as the English text on the other pages */
}
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-en { font-size: 12px; } /* phones: same size as the English text on the other pages */
}

/* About contact details styled like the home page ones: 14px, line spacing 1.7, same gap between rows */
.v2-page.v2-type .v2-about-contact { font-size: 14px; line-height: 1.7; }
.v2-page.v2-type .v2-about-contact li + li { margin-top: 0.35em; }
.v2-page .v2-intro .v2-en { line-height: 1.6; } /* longer English texts at line spacing 1.6 everywhere */

/* About: the first English paragraph (the summary) in italic */
.v2-page .v2-about-en p:first-child { font-style: italic; }

/* Phones, About: lead and body text at full width; below them the portrait on the left and the contact details
   on its right; no photo credit */
@media (max-width: 760px) {
  .v2-page.v2-type .v2-about-intro .v2-about-fi > .v2-about-quote { grid-column: 1 / -1; grid-row: auto; }
  .v2-page.v2-type .v2-about-intro .v2-about-quote p { font-size: 24px; }
  .v2-page .v2-about-intro .v2-about-portrait { order: 1; grid-column: 1; grid-row: auto; align-self: start; margin: 12px 0 0; }
  .v2-page .v2-about-intro .v2-about-contact { order: 1; grid-column: 2; align-self: end; margin: 0; }
  .v2-page .v2-about-intro .v2-about-mid { order: 2; }
  .v2-page .v2-about-intro .v2-about-portrait figcaption { display: block; position: static; margin: 6px 0 0; padding: 0; text-align: left; font-size: 9px; line-height: 1.6; white-space: nowrap; }
}
@media (max-width: 760px) {
  .v2-page .v2-about-intro { grid-auto-flow: row dense; } /* the portrait fills the free cell left of the contacts */
}

/* About English text: the shorter, one-paragraph version on every screen size */
.v2-page .v2-about-en:not(.v2-about-en-short) { display: none; }
.v2-page .v2-about-en-short { display: block; }
.v2-page .v2-about-en-short p:first-child { font-style: normal; } /* one paragraph; only its first sentence (em) is italic */
@media (max-width: 760px) {
  .v2-page .v2-works-title { margin-bottom: 39px; } /* phones: filter buttons start where the About lead's capital U starts */
}


/* Hanging indent for the "— " list items on project pages: a wrapped line starts under the text, not under the dash */
.v2-page .v2-dash { display: block; padding-left: 1.16em; text-indent: -1.16em; }

/* Phones: the photo credit on the S-Pankki tram image at 54 % of its original size (and of its distance from the corner) */
@media (max-width: 760px) {
  .v2-media-credit figcaption { font-size: 4.86px; bottom: 6.3px; right: 5.4px; }
}

/* Phones, project pages: a little more space between the small credit line under the title and the body text */
@media (max-width: 760px) {
  .v2-page .v2-project-text { margin-top: 12px; }
}

/* Phones, home: the vertical photo credit (Fanny Haga) at 75 % of its size */
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-portrait figcaption { font-size: 6.75px; margin-left: 4.5px; }
}
.v2-page .v2-portrait figcaption span { font-size: inherit; } /* "Photo" follows the credit size */

/* Phones, home: the portrait and its vertical credit move right so the credit's right edge meets the page's right margin,
   in line with the project images */
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-portrait { justify-self: end; margin-right: 0; }
  .v2-page .v2-intro .v2-portrait figcaption { display: none; } /* no photo credit on the home portrait on phones */
}

/* Phones, home: the portrait fills its grid column, so its left edge sits on the column line (the gap right of the English text) */
@media (max-width: 760px) {
  .v2-page .v2-intro .v2-portrait { width: 100%; }
}

/* Phones, About: the contact details start at the top of the head in the portrait (the head's top sits 16 % of the
   photo's height below its top edge; the photo is 100vw - 255.75px wide since the contact column takes the rest; the arrow circles sit 2.45px inside the first line; the portrait has a 12px top margin of its own) */
@media (max-width: 760px) {
  .v2-page .v2-about-intro .v2-about-contact { align-self: start; margin-top: calc(0.2252 * 100vw - 48.05px); }
}

/* Phones, About: the English text a little closer to the portrait row */
@media (max-width: 760px) {
  .v2-page .v2-about-intro .v2-about-mid { margin-top: 10px; }
}

/* Phones, About: the space above "The Full Menu" equals the space above "My superpowers" (measured to the capital letters' tops) */
@media (max-width: 760px) {
  .v2-page .v2-about-expertise { padding-top: calc(72px + 0.358vw); }
}

/* Header name in a thin white outline box with the same corner radius as the images; no fill.
   The box's left edge sits on the page margin like the images; negative vertical margins keep the header's height as it was. */
.v2-page .v2-header .v2-logo {
  display: inline-block;
  padding: 4px 13px 4px 15px; /* a little more room at the sides; text nudged 1px right so it looks centred in the pill */
  margin: -4px 0;
  border: 0.5px solid #fff;
  border-radius: 999px; /* pill (trial) */
  background: none;
}
@media (max-resolution: 1.5dppx) {
  .v2-page .v2-header .v2-logo { border-width: 1px; }
}
/* Phones: 0.667px is exactly two device pixels on a 3x screen (iPhone), and with a whole-pixel line height the box sits on
   device pixels, so the thin line draws evenly instead of looking thick or patchy */
@media (max-width: 760px) {
  .v2-page .v2-header .v2-logo { border-width: 0.667px; }
}
.v2-page .v2-header .v2-logo { line-height: 22px; }

/* Project pages: the header sits on top of the hero image (which starts at the very top of the page): white type over a
   black gradient that fades out downward, so the text reads against any photo (the footer stays white) */
.v2-page:has(.v2-project) .v2-header {
  --ink: #fff;
  --accent: #fff;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  background: none;
  color: #fff;
}
.v2-page:has(.v2-project) .v2-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 210px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: -1;
}
.v2-page:has(.v2-project) .v2-header a { color: #fff; }

/* Project hero images: now that the header lies on top of them, they are as much taller as the header bar used to be
   (--hh), so the visible picture keeps its former size */
.v2-page { --hh: 71px; }
@media (max-width: 560px) { .v2-page { --hh: 55px; } }
.v2-page .v2-project-hero { height: 100vh; }
@media (max-width: 900px) {
  .v2-page img.v2-project-hero { aspect-ratio: auto; height: calc(100vw / var(--ar, 1.7778) + var(--hh)); }
  .v2-page .v2-logo-hero { aspect-ratio: auto; height: calc(75vw + var(--hh)); }
}
@media (max-width: 760px) {
  .v2-page img.v2-project-hero { aspect-ratio: auto; height: calc((100vw / (var(--ar, 1.7778) * 0.68) + var(--hh)) * 1.21); } /* +10 % twice (1.1 × 1.1) */
}

/* Phones, The Full Menu: the captions under the circles a little smaller */
@media (max-width: 760px) {
  .v2-page.v2-type .v2-expertise-grid .v2-title { font-size: 14px; }
}

/* Phones: project hero images square (1:1), full content width */
@media (max-width: 760px) {
  .v2-page img.v2-project-hero { height: calc(100vw - 2 * var(--gutter)); }
}

/* Phones (trial): the first project image sits in a frame like the other content images — side margins, rounded
   corners — below the header instead of running edge to edge under it */
@media (max-width: 760px) {
  .v2-page img.v2-project-hero {
    width: calc(100% - 2 * var(--gutter));
    margin: calc(99.24px + 0.0197 * 100vw) auto 0; /* top edge level with the top of the D of "Duunit" on the Works page */
    border-radius: var(--radius, 2px);
  }
}

/* Phones, home "Muita duuneja" and the Works page: the project images square (1:1) */
@media (max-width: 760px) {
  .v2-page .v2-work-grid .v2-img { aspect-ratio: 1 / 1; }
}

/* Desktop only: contact details a little bigger (Home 14 → 15px, About 14 → 15px); phones unchanged */
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-contact { font-size: clamp(13px, 2.4vh, 15px); }
  .v2-page.v2-type .v2-about-contact { font-size: 15px; }
}

/* Desktop only: a touch of letter-spacing on the English summary texts (light type on dark): Home, project pages, About */
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-en,
  .v2-page .v2-project-summary p,
  .v2-page .v2-about-en p { letter-spacing: 0.02em; }
}

/* Desktop only: the same slight letter-spacing on the other 14px light-on-dark texts: filter buttons, project categories
   under the images, the credit line under a project title, and the footer texts on the dark pages (the project
   pages' footer is white, so it stays as it was) */
@media (min-width: 901px) {
  .v2-page .v2-filters button,
  .v2-page .v2-card .v2-label,
  .v2-page .v2-project-credit,
  .v2-page:has(.v2-intro) .v2-footer-cols,
  .v2-page:has(.v2-works-page) .v2-footer-cols,
  .v2-page:has(.v2-about-intro) .v2-footer-cols { letter-spacing: 0.02em; }
}

/* Desktop only: a little letter-spacing on the contact details (Home and About) */
@media (min-width: 901px) {
  .v2-page .v2-intro .v2-contact,
  .v2-page.v2-type .v2-about-contact { letter-spacing: 0.02em; }
}

/* The Full Menu: 24 items in even rows — 8 across on desktop, 6 on tablets, 3 on phones */
@media (min-width: 961px) { .v2-page .v2-expertise-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 960px) { .v2-page .v2-expertise-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* The Full Menu circles at their original size, though the grid has 8 / 6 columns now: the width one cell had in the old
   9-column grid (wide screens), 7-column grid (medium), 5-column grid (tablets); never wider than the cell itself */
@media (min-width: 1301px) { .v2-page .v2-expertise-grid .v2-img { width: calc(min(100%, (100vw - 2 * var(--gutter) - 8 * 16px) / 9) * 0.9); } }
@media (min-width: 961px) and (max-width: 1300px) { .v2-page .v2-expertise-grid .v2-img { width: calc(min(100%, (100vw - 2 * var(--gutter) - 6 * 16px) / 7) * 0.9); } }
@media (min-width: 561px) and (max-width: 960px) { .v2-page .v2-expertise-grid .v2-img { width: calc(min(100%, (100vw - 2 * var(--gutter) - 4 * 16px) / 5) * 0.9); } }

/* Phones, Home and Works: the Aalto EE grid card shows the 3:4 "latest" photo, cropped square from its bottom edge */
.v2-page .v2-work-grid .v2-img picture { display: contents; }
@media (max-width: 760px) {
  .v2-page .v2-work-grid a[href$="aalto-ee/"] img { object-position: center bottom; }
}

/* Desktop, Home and Works: the Vattumato card image recropped — the picture 20 % larger inside its frame (centred) */
@media (min-width: 901px) {
  .v2-page .v2-card[href$="vattumato/"] .v2-img img { scale: 1.2; }
}

/* Phones, Home and Works: the Vattumato card image 12 % larger inside its frame (centred) */
@media (max-width: 760px) {
  .v2-page .v2-card[href$="vattumato/"] .v2-img img { scale: 1.12; }
}

/* Phones, Home, Works and the Tradeka project page: the Tradeka image shifted left inside its square frame, so the two
   booklets sit in the middle (overrides the inline object-position the generator sets on the cards) */
@media (max-width: 760px) {
  .v2-page .v2-card[href$="tradeka/"] .v2-img img,
  .v2-page img.v2-project-hero[src$="/tradeka/01.jpg"] { object-position: 65% 48% !important; }
}

/* Phones, Vattumato project page: the hero picture 3 % larger inside its frame. The image has no frame of its own, so it
   is scaled and then clipped back to its original size (corners stay rounded) */
@media (max-width: 760px) {
  .v2-page img.v2-project-hero[src$="/vattumato/01.jpg"] {
    scale: 1.03;
    clip-path: inset(calc(100% * (1 - 1 / 1.03) / 2) round calc(var(--radius, 2px) / 1.03));
  }
}

/* Phones, Home and Works: the Food&Events card image 10 % larger inside its frame (centred) */
@media (max-width: 760px) {
  .v2-page .v2-card[href$="foodandeventscups/"] .v2-img img { scale: 1.1; }
}

/* Phones, Home and Works: the Tekniska card image 2 % larger inside its frame (centred) */
@media (max-width: 760px) {
  .v2-page .v2-card[href$="tekniska/"] .v2-img img { scale: 1.02; }
}


/* Phones, quote credits: a marked group of words (e.g. a company name) always sits on its own line under the name, so
   the credit never runs the full width of the screen */
@media (max-width: 760px) {
  .v2-page .v2-project-quote figcaption .v2-keep { display: block; white-space: nowrap; }
}

/* Phones, Sijoittumismyynti project page: the hero centred like the card on Home and Works (the 61 % shift is meant for
   the wide desktop picture; overrides the inline object-position) */
@media (max-width: 760px) {
  .v2-page img.v2-project-hero[src$="/sijoittumismyynti/05-wide-v3.jpg"] { object-position: 50% 50% !important; }
}

/* Home and Works, all screen sizes: the Restel menus card image 5 % larger inside its frame (centred) */
.v2-page .v2-card[href$="restel-menus/"] .v2-img img { scale: 1.05; }

/* Restel menus project page, all screen sizes: the Mestaritalli clipboard picture (16) 15 % larger inside its frame. The
   image has no frame of its own, so it is scaled and then clipped back to its original size (corners stay rounded) */
.v2-page .v2-project-media img[src$="/restel-menus/16.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Restel menus project page, all screen sizes: the Central menus on pink (20) 21 % larger inside its frame, clipped back
   to its original size like picture 16 */
.v2-page .v2-project-media img[src$="/restel-menus/20.jpg"] {
  scale: 1.21;
  clip-path: inset(calc(100% * (1 - 1 / 1.21) / 2) round calc(var(--radius, 2px) / 1.21));
}

/* Restel menus project page, all screen sizes: the Bastion menu on yellow (22) 15 % larger inside its frame, clipped back
   to its original size like picture 16 */
.v2-page .v2-project-media img[src$="/restel-menus/22.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Desktop, project pages: a little more space between every quote and the name under it (20 → 32px) */
@media (min-width: 901px) {
  .v2-page .v2-project-quote figcaption { padding-top: 12px; } /* padding: a margin would merge with the 20px above */
}

/* HelmiSimpukka identity project page, all screen sizes: the two loyalty-card badges (09) 20 % larger inside the frame,
   clipped back to its original size like the Restel menus pictures */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/09.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* HelmiSimpukka identity project page, all screen sizes: the two menus on green (12) 5 % larger inside the frame,
   clipped back to its original size like picture 09 */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/12.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* HelmiSimpukka and HelmiSimpukka identity project pages, all screen sizes: the logo on green (19 / 14) 30 % larger
   inside the frame, clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img:is([src$="/helmisimpukka/19.jpg"], [src$="/helmisimpukka-identity/14.jpg"]) {
  scale: 1.3;
  clip-path: inset(calc(100% * (1 - 1 / 1.3) / 2) round calc(var(--radius, 2px) / 1.3));
}

/* HelmiSimpukka identity project page, all screen sizes: the two posters (06) 10 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/06.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* HelmiSimpukka identity project page, all screen sizes: the iced coffee poster (07) 10 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/07.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* HelmiSimpukka identity project page, all screen sizes: the sausage-fries poster with the arc (05) 10 % larger inside
   the frame, clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/05.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* HelmiSimpukka identity project page, all screen sizes: the three dishes on green (11) 11 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/helmisimpukka-identity/11.jpg"] {
  scale: 1.11;
  clip-path: inset(calc(100% * (1 - 1 / 1.11) / 2) round calc(var(--radius, 2px) / 1.11));
}

/* Restel project page, all screen sizes: the photo in the leaf shape on beige (04) 20 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/restel/restel-05.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* Restel project page, all screen sizes: the four icons on orange (07) 2 % larger inside the frame, clipped back to its
   original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/restel/restel-08.jpg"] {
  scale: 1.02;
  clip-path: inset(calc(100% * (1 - 1 / 1.02) / 2) round calc(var(--radius, 2px) / 1.02));
}

/* Restel project page, all screen sizes: the two T-shirts (11) 22 % larger inside the frame and lifted 3 % of the frame's
   height; the clip is shifted by the same amount so the visible frame stays exactly where it was */
.v2-page .v2-project-media img[src$="/projects/restel/restel-13.jpg"] {
  scale: 1.22;
  translate: 0 -3%;
  clip-path: inset(calc(100% * (1 - 1 / 1.22) / 2 + 3% / 1.22) calc(100% * (1 - 1 / 1.22) / 2)
                   calc(100% * (1 - 1 / 1.22) / 2 - 3% / 1.22) round calc(var(--radius, 2px) / 1.22));
}

/* Purado project page, all screen sizes: the colours and Roc Grotesk typeface (04) 20 % larger inside the frame and
   lifted 3 % of the frame's height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/purado/purado-05.jpg"] {
  scale: 1.2;
  translate: 0 -3%;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2 + 3% / 1.2) calc(100% * (1 - 1 / 1.2) / 2)
                   calc(100% * (1 - 1 / 1.2) / 2 - 3% / 1.2) round calc(var(--radius, 2px) / 1.2));
}

/* Purado project page, all screen sizes: the five rings on blue (05) 5 % larger inside the frame, clipped back to its
   original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/purado/purado-06.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Tekniska project page, all screen sizes: the logo on peach (02) 43 % larger inside the frame and lifted 3 % of the
   frame's height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-02.jpg"] {
  scale: 1.43;
  translate: 0 -3%;
  clip-path: inset(calc(100% * (1 - 1 / 1.43) / 2 + 3% / 1.43) calc(100% * (1 - 1 / 1.43) / 2)
                   calc(100% * (1 - 1 / 1.43) / 2 - 3% / 1.43) round calc(var(--radius, 2px) / 1.43));
}

/* Tekniska project page, all screen sizes: "Tila ratkaisee." (04) 10 % larger inside the frame and lifted 2.5 % of the
   frame's height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-04.jpg"] {
  scale: 1.1;
  translate: 0 -2.5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2 + 2.5% / 1.1) calc(100% * (1 - 1 / 1.1) / 2)
                   calc(100% * (1 - 1 / 1.1) / 2 - 2.5% / 1.1) round calc(var(--radius, 2px) / 1.1));
}

/* Tekniska project page, all screen sizes: the curled poster (06) 8 % larger inside the frame, clipped back to its
   original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-08.jpg"] {
  scale: 1.08;
  clip-path: inset(calc(100% * (1 - 1 / 1.08) / 2) round calc(var(--radius, 2px) / 1.08));
}

/* Tekniska project page, all screen sizes: the two A-frame signs (09) 13 % larger inside the frame, clipped back to its
   original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-12.jpg"] {
  scale: 1.13;
  clip-path: inset(calc(100% * (1 - 1 / 1.13) / 2) round calc(var(--radius, 2px) / 1.13));
}

/* Tekniska project page, all screen sizes: the website page with the floor plan (10) 15 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-05.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Tekniska project page, all screen sizes: the three room photos (12) 10 % larger inside the frame, clipped back to its
   original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-16.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Tekniska project page, all screen sizes: the "6 kerros" sheet on concrete (08) 10 % larger inside the frame and moved
   down 1.5 % of the frame's height; the clip is shifted by the same amount so the visible frame stays where it was
   (the same picture as the hero; the hero is unchanged) */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-11.jpg"] {
  scale: 1.1;
  translate: 0 1.5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2 - 1.5% / 1.1) calc(100% * (1 - 1 / 1.1) / 2)
                   calc(100% * (1 - 1 / 1.1) / 2 + 1.5% / 1.1) round calc(var(--radius, 2px) / 1.1));
}

/* Lappeenranta theatre project page, all screen sizes: the yellow "Pim pom, Manu Mäyräkoira" still (06) 5 % larger
   inside the frame, clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/lappeenrannan-kaupunginteatteri/06.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Lappeenranta theatre project page, all screen sizes: the Manu illustration (09) and the Kierros poster on the ribbed
   wall (10) 5 % larger inside the frame, clipped back to their original size like the other enlarged pictures */
.v2-page .v2-project-media img:is([src$="/lappeenrannan-kaupunginteatteri/09.jpg"], [src$="/lappeenrannan-kaupunginteatteri/10.jpg"]) {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Lappeenranta theatre project page, all screen sizes: the Sointula / Yököpelit brochures (02) 3 % larger inside the
   frame, grown from the right edge so the picture's right edge stays where it was; clipped back to its original size */
.v2-page .v2-project-media img[src$="/lappeenrannan-kaupunginteatteri/02.jpg"] {
  scale: 1.03;
  transform-origin: right center;
  clip-path: inset(calc(100% * (1 - 1 / 1.03) / 2) 0 calc(100% * (1 - 1 / 1.03) / 2) calc(100% * (1 - 1 / 1.03))
                   round calc(var(--radius, 2px) / 1.03));
}

/* Musiikkitalo project page, all screen sizes: the instruments on green (06) 15 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/musiikkitalon-vapaapaiva/06.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Musiikkitalo project page, all screen sizes: the Musiikkitalo logo on beige (15) 10 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/musiikkitalon-vapaapaiva/15.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Musiikkitalo project page, all screen sizes: the violinists with the Vapaapäivä badge (02) 11 % larger inside the
   frame, clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/musiikkitalon-vapaapaiva/02-v2.jpg"] {
  scale: 1.11;
  clip-path: inset(calc(100% * (1 - 1 / 1.11) / 2) round calc(var(--radius, 2px) / 1.11));
}

/* Musiikkitalo project page, all screen sizes: the poster stand with the instruments (03) 5.5 % larger inside the frame,
   centred vertically and moved 2px to the right; the clip is shifted by the same amount so the visible frame stays
   where it was */
.v2-page .v2-project-media img[src$="/musiikkitalon-vapaapaiva/03.jpg"] {
  scale: 1.055;
  translate: 2px 0;
  clip-path: inset(calc(100% * (1 - 1 / 1.055) / 2) calc(100% * (1 - 1 / 1.055) / 2 + 2px / 1.055)
                   calc(100% * (1 - 1 / 1.055) / 2) calc(100% * (1 - 1 / 1.055) / 2 - 2px / 1.055)
                   round calc(var(--radius, 2px) / 1.055));
}

/* International Week project page, all screen sizes: the poster on the brick wall (05) 10 % larger inside the frame,
   grown from the bottom-left corner so the picture's left and bottom edges stay where they were (only the top and the
   right are cropped); clipped back to its original size */
.v2-page .v2-project-media img[src$="/internationalweek/05.jpg"] {
  scale: 1.1;
  transform-origin: left bottom;
  clip-path: inset(calc(100% * (1 - 1 / 1.1)) calc(100% * (1 - 1 / 1.1)) 0 0 round calc(var(--radius, 2px) / 1.1));
}

/* Auto-Kilta project page, all screen sizes: the old and new logo on white (03) 5 % larger inside the frame, clipped
   back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/auto-kilta/auto-kilta-03.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Auto-Kilta project page, all screen sizes: "Luotettavasti kaikille teille" on blue (04) 15 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/auto-kilta/auto-kilta-04.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Auto-Kilta project page, all screen sizes: the white car with the logo (05) 5 % larger inside the frame, grown from
   the bottom-left corner so the picture's left and bottom edges stay where they were; clipped back to its original size */
.v2-page .v2-project-media img[src$="/projects/auto-kilta/auto-kilta-05.jpg"] {
  scale: 1.05;
  transform-origin: left bottom;
  clip-path: inset(calc(100% * (1 - 1 / 1.05)) calc(100% * (1 - 1 / 1.05)) 0 0 round calc(var(--radius, 2px) / 1.05));
}

/* Toivo project page, all screen sizes: the banana with the Toivo sticker (09) 15 % larger inside the frame, clipped
   back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/toivo/toivo-11.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Sijoittumismyynti project page, all screen sizes: the six icons on dark blue (02) 10 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/sijoittumismyynti/sijoittumismyynti-04.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* HelmiSimpukka project page, all screen sizes: the two posters on the white wall (02) 25 % larger inside the frame and
   moved down 5 % of the frame's height, so the grey plinth and asphalt at the bottom of the photo are hidden; the clip
   is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-02.jpg"] {
  scale: 1.25;
  translate: 0 5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.25) / 2 - 5% / 1.25) calc(100% * (1 - 1 / 1.25) / 2)
                   calc(100% * (1 - 1 / 1.25) / 2 + 5% / 1.25) round calc(var(--radius, 2px) / 1.25));
}

/* HelmiSimpukka project page, all screen sizes: the Korean BBQ Burger poster (07) 10 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-22.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* HelmiSimpukka project page, all screen sizes: the takeaway bag with snacks (09) 20 % larger inside the frame and
   lifted 3 % of the frame's height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-09.jpg"] {
  scale: 1.2;
  translate: 0 -3%;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2 + 3% / 1.2) calc(100% * (1 - 1 / 1.2) / 2)
                   calc(100% * (1 - 1 / 1.2) / 2 - 3% / 1.2) round calc(var(--radius, 2px) / 1.2));
}

/* HelmiSimpukka project page, all screen sizes: the "Pizzat 24 h" menu stand (14) 20 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-24.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* HelmiSimpukka project page, all screen sizes: the "Voita NY" poster stand (17) 5 % larger inside the frame and lifted
   2.5 % of the frame's height (the most this zoom allows before the picture's bottom edge would show); the clip is
   shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-17.jpg"] {
  scale: 1.05;
  translate: 0 -2.5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2 + 2.5% / 1.05) calc(100% * (1 - 1 / 1.05) / 2)
                   max(0%, calc(100% * (1 - 1 / 1.05) / 2 - 2.5% / 1.05)) round calc(var(--radius, 2px) / 1.05));
}

/* HelmiSimpukka project page, all screen sizes: the "Kahvi + munkki" billboard (18) 5 % larger inside the frame and
   lifted 2.5 % of the frame's height (the most this zoom allows before the picture's bottom edge would show); the clip
   is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-26.jpg"] {
  scale: 1.05;
  translate: 0 -2.5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2 + 2.5% / 1.05) calc(100% * (1 - 1 / 1.05) / 2)
                   max(0%, calc(100% * (1 - 1 / 1.05) / 2 - 2.5% / 1.05)) round calc(var(--radius, 2px) / 1.05));
}

/* St1 / Shell project page, all screen sizes: the "Voita puhdas" poster (06) 15 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/shell-st1/shell-st1-06.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* St1 / Shell project page, all screen sizes: the two "Voita" cards on red (08) 5 % larger inside the frame, clipped
   back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/shell-st1/shell-st1-08.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* St1 / Shell project page, all screen sizes: the Shell and St1 logos on white (09) 10 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/shell-st1/shell-st1-09.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Makaronitehdas project page, all screen sizes: the two phones on yellow (06) 25 % larger inside the frame and moved
   left 2 % of the frame's width; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/makaronitehdas/makaronitehdas-07.jpg"] {
  scale: 1.25;
  translate: -2% 0;
  clip-path: inset(calc(100% * (1 - 1 / 1.25) / 2) calc(100% * (1 - 1 / 1.25) / 2 - 2% / 1.25)
                   calc(100% * (1 - 1 / 1.25) / 2) calc(100% * (1 - 1 / 1.25) / 2 + 2% / 1.25)
                   round calc(var(--radius, 2px) / 1.25));
}

/* Makaronitehdas project page, all screen sizes: the crayfish salad with the "Tehdas suosittelee" badge (14) 10 % larger
   inside the frame, clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/makaronitehdas/makaronitehdas-15.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Makaronitehdas project page, all screen sizes: the opening-offer video (02) 5 % larger inside the frame, clipped back
   to its original size like the enlarged pictures */
.v2-page .v2-project-media video[src$="/projects/makaronitehdas/makaronitehdas-02.mp4"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Makaronitehdas project page, all screen sizes: the pasta plate on cream (07) 10 % larger inside the frame, clipped
   back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/makaronitehdas/makaronitehdas-08.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Makaronitehdas project page, all screen sizes: the folded black T-shirt (13) 5 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/makaronitehdas/makaronitehdas-14.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Makaronitehdas project page, all screen sizes: the opening-offer screen stand (08) 5 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/makaronitehdas/makaronitehdas-09.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Tradeka project page, all screen sizes: the magazine spread on purple (03) 5 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tradeka/tradeka-03.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Tradeka project page, all screen sizes: the newspaper spread on blue (05) 3 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tradeka/tradeka-05.jpg"] {
  scale: 1.03;
  clip-path: inset(calc(100% * (1 - 1 / 1.03) / 2) round calc(var(--radius, 2px) / 1.03));
}

/* Tradeka project page, all screen sizes: the 2020 annual report on blue (08) 5 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/tradeka/tradeka-08.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Desktop, Restel project page: the hero picture is anchored to the bottom edge of its frame, so any cropping happens at the top */
@media (min-width: 901px) {
  .v2-page img.v2-project-hero[src$="/projects/restel/restel-20.jpg"] { object-position: center bottom !important; }
}

/* Vimeo case film in a project's content images: a 16:9 frame as wide as the pictures, rounded like them */
.v2-project-media .v2-embed { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.v2-project-media .v2-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Sijoittumismyynti project page, all screen sizes: the four 16:9 pictures (01-04) get the standard, slightly taller frame (1920 × 1220);
   the pictures fill it, so they are enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media img:is([src$="/projects/sijoittumismyynti/01.jpg"], [src$="/projects/sijoittumismyynti/sijoittumismyynti-04.jpg"], [src$="/projects/sijoittumismyynti/sijoittumismyynti-05.jpg"], [src$="/projects/sijoittumismyynti/sijoittumismyynti-06.jpg"], [src$="/projects/sijoittumismyynti/sijoittumismyynti-02.jpg"]) {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Auto-Kilta project page, all screen sizes: the logo on blue (08) 20 % larger inside the frame and moved down 2 % of the frame's
   height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/auto-kilta/08.jpg"] {
  scale: 1.2;
  translate: 0 2%;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2 - 2% / 1.2) calc(100% * (1 - 1 / 1.2) / 2) calc(100% * (1 - 1 / 1.2) / 2 + 2% / 1.2) round calc(var(--radius, 2px) / 1.2));
}

/* All project pages: content pictures made at 2160 × 1366 (Aalto EE, S-Pankki, Elisa) get exactly the standard frame (1920 × 1220);
   the picture fills it, so about 0.4 % of it is cropped */
.v2-page .v2-project-media img[width="2160"][height="1366"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Restel project page, all screen sizes: the 16:9 picture (05) gets the standard, slightly taller frame (1920 × 1220); the picture
   fills it, so it is enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media img[src$="/projects/restel/restel-06.jpg"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Stora Enso project page, all screen sizes: the 16:9 picture (04) gets the standard, slightly taller frame (1920 × 1220); the picture
   fills it, so it is enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media img[src$="/projects/stora-enso-packaging/stora-enso-packaging-05.jpg"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Stora Enso project page, all screen sizes: the picture (04) 6 % larger inside its frame and moved up 2 % of the frame's height;
   the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/stora-enso-packaging/stora-enso-packaging-05.jpg"] {
  scale: 1.06;
  translate: 0 -2%;
  clip-path: inset(calc(100% * (1 - 1 / 1.06) / 2 + 2% / 1.06) calc(100% * (1 - 1 / 1.06) / 2) calc(100% * (1 - 1 / 1.06) / 2 - 2% / 1.06) round calc(var(--radius, 2px) / 1.06));
}

/* Shell St1 project page, all screen sizes: the 16:9 pictures (07, 09) get the standard, slightly taller frame (1920 × 1220); the pictures
   fill it, so they are enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media img:is([src$="/projects/shell-st1/shell-st1-07.jpg"], [src$="/projects/shell-st1/shell-st1-09.jpg"]) {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Tekniska project page, all screen sizes: the 16:9 picture (05) gets the standard, slightly taller frame (1920 × 1220); the picture
   fills it, so it is enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-06.jpg"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Tekniska project page, all screen sizes: the picture (05) 1 % larger inside its frame, clipped back to its original size */
.v2-page .v2-project-media img[src$="/projects/tekniska/tekniska-06.jpg"] {
  scale: 1.01;
  clip-path: inset(calc(100% * (1 - 1 / 1.01) / 2) round calc(var(--radius, 2px) / 1.01));
}

/* Elisa project page, all screen sizes: the three 16:9 videos (02, 05, 10) get the standard, slightly taller frame (1920 × 1220);
   the video keeps its size and black bars appear above and below it */
.v2-page .v2-project-media video:is([src$="/projects/elisa/elisa-03.mp4"], [src$="/projects/elisa/elisa-07.mp4"], [src$="/projects/elisa/elisa-10.mp4"]) {
  aspect-ratio: 1920 / 1220;
  object-fit: contain;
  background: #000;
}

/* Elisa project page, all screen sizes: the logo loop (09) gets the standard frame too; the video fills it, so it is
   enlarged inside the frame by about 13 % (the sides are cropped a little) */
.v2-page .v2-project-media video[src$="/projects/elisa/elisa-14.mp4"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Enlarged pictures (scale + clip-path) stick out of their frames in the layout even though they are clipped visually; on phones that
   made the page wider than the screen (it could be zoomed and panned sideways). The picture area now clips them at its edges */
.v2-project-media { overflow-x: clip; }

/* OmaSP project page, all screen sizes: the logo picture (last) 5 % larger inside the frame and moved up 1.5 % of the frame's
   height; the clip is shifted by the same amount so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/omasp/omasp-13.jpg"] {
  scale: 1.05;
  translate: 0 -1.5%;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2 + 1.5% / 1.05) calc(100% * (1 - 1 / 1.05) / 2)
                   max(0%, calc(100% * (1 - 1 / 1.05) / 2 - 1.5% / 1.05)) round calc(var(--radius, 2px) / 1.05));
}

/* Traba project page, all screen sizes: the logo picture (last) 10 % larger inside the frame, clipped back to its original size
   like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/traba/traba-24.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Restel and Restel menus project pages, all screen sizes: the logo pictures (the last picture on each page) 5 % larger inside the frame,
   clipped back to its original size like the other enlarged pictures */
.v2-page .v2-project-media img:is([src$="/projects/restel/restel-15.jpg"], [src$="/projects/restel-menus/restel-menus-27.jpg"]) {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Purado project page, all screen sizes: the logo picture (last) 10 % larger inside the frame, clipped back to its original size
   like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/purado/purado-18.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Desktop, project pages: the part of the line under the title after the dash ("Generaxion, 2023") always stays on one line;
   if it does not fit after the client's name, the whole of it moves to the next line */
@media (min-width: 901px) {
  .v2-project-credit .v2-credit-when { white-space: nowrap; }
}

/* Desktop, project pages: a little more empty space before the English summary (was 40px, now 56px) */
@media (min-width: 901px) {
  .v2-page .v2-project-text .v2-project-summary { margin-top: 56px; }
}

/* Toivo project page, all screen sizes: the SVG graphics (text, somet and stamp2, about 1440 × 850) get the standard frame (1920 × 1220); it fills the frame,
   so a thin strip of the empty sides is cropped */
.v2-page .v2-project-media img:is([src$="/projects/toivo/toivo-06.svg"], [src$="/projects/toivo/toivo-08.svg"], [src$="/projects/toivo/toivo-16.svg"]) {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Toivo project page, all screen sizes: the stamps graphic (SVG) is upright (746 × 870), so it sits whole in the standard frame
   (1920 × 1220) with bars of its own cream colour at the sides instead of being cropped; 20 % larger inside the frame, clipped back to its original size */
.v2-page .v2-project-media img[src$="/projects/toivo/toivo-12.svg"] {
  aspect-ratio: 1920 / 1220;
  object-fit: contain;
  background: #fef7ed;
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* Toivo project page, all screen sizes: the "toivo" logo picture (13, now the first picture) 5 % larger inside the frame, clipped back
   to its original size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/toivo/toivo-17.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Auto-Kilta project page, all screen sizes: the logo picture (last) 20 % larger inside the frame, clipped back to its original
   size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/auto-kilta/auto-kilta-09.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* Toivo project page, all screen sizes: the three social media squares (somet) 25 % larger inside the frame, grown from the middle so they
   stay centred; clipped back to the frame's size like the other enlarged pictures */
.v2-page .v2-project-media img[src$="/projects/toivo/toivo-08.svg"] {
  scale: 1.25;
  clip-path: inset(calc(100% * (1 - 1 / 1.25) / 2) round calc(var(--radius, 2px) / 1.25));
}

/* Toivo project page, all screen sizes: the "toivo" logo with the tagline (04, the first picture) 10 % larger inside the frame, moved
   up 2 % of the frame's height and right 0.926 % of its width (10 px on a 1080 px wide frame); the clip is shifted by the same
   amounts so the visible frame stays where it was */
.v2-page .v2-project-media img[src$="/projects/toivo/toivo-02.jpg"] {
  scale: 1.1;
  translate: 0.926% -2%;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2 + 2% / 1.1)
                   calc(100% * (1 - 1 / 1.1) / 2 + 0.926% / 1.1)
                   max(0%, calc(100% * (1 - 1 / 1.1) / 2 - 2% / 1.1))
                   max(0%, calc(100% * (1 - 1 / 1.1) / 2 - 0.926% / 1.1)) round calc(var(--radius, 2px) / 1.1));
}

/* About logo strip, phones: per-logo size balance measured at phone size (--sp, set in clients.json as scale_phone; the width cap shrinks wide logos there) */
@media (max-width: 760px) {
  .v2-page .v2-clients-phone .v2-clients-run img {
    height: calc(29.03px * var(--sp, var(--s, 1)));
    max-width: calc(133.06px * var(--sp, var(--s, 1)));
  }
}
@media (max-width: 560px) {
  .v2-page .v2-clients-phone .v2-clients-run img {
    height: calc(24.19px * var(--sp, var(--s, 1)));
    max-width: calc(103.82px * var(--sp, var(--s, 1)));
  }
}

/* About logo strip, phones: a little more space between the logos sideways */
@media (max-width: 760px) {
  .v2-page .v2-clients-phone .v2-clients-run { gap: 27px; padding-right: 27px; }
}
@media (max-width: 560px) {
  .v2-page .v2-clients-phone .v2-clients-run { gap: 14px; padding-right: 14px; }
}

/* Headings for search engines and screen readers only: visible to them, not drawn */
.v2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Traba project page: the logos picture (first) 5 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-25.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Traba project page: the typography picture (Space Mono) 10 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-07.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Traba project page: picture 13 10 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-13.jpg"] {
  scale: 1.1;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) round calc(var(--radius, 2px) / 1.1));
}

/* Traba project page: picture 17 (two lit screens) 5 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-17.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Traba project page: picture 20 (six social posts on gold) 5 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-20.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Traba project page: picture 22 5 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-22.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Traba project page: picture 06 5 % larger inside the frame, clipped to the frame with rounded corners */
.v2-page .v2-project-media img[src$="/projects/traba/traba-06.jpg"] {
  scale: 1.05;
  clip-path: inset(calc(100% * (1 - 1 / 1.05) / 2) round calc(var(--radius, 2px) / 1.05));
}

/* Vimeo film (Traba), all screen sizes: the standard picture frame (1920 × 1220) with black bars above and below the 16:9 player */
.v2-project-media .v2-embed { aspect-ratio: 1920 / 1220; display: flex; align-items: center; }
.v2-project-media .v2-embed iframe { height: auto; aspect-ratio: 16 / 9; }

/* Elisa Salama-Ale project page: the logo loop gets the standard frame like on the Elisa page */
.v2-page .v2-project-media video[src$="/projects/elisa-salama-ale/elisa-salama-ale-06.mp4"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* Desktop, Works: the Elisa Salama-Ale card picture 5 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/card-07.jpg"] { scale: 1.05; }
}

/* Desktop: a little more letter spacing in the Finnish body text of the project pages (not the English summary) */
@media (min-width: 761px) {
  .v2-page .v2-project-text > p { letter-spacing: 0.015em; }
}

/* Food&Events Tapahtumaravintolat card: a grey box in place of the picture until it is made */
.v2-img-placeholder { background: #c8c8c8; }

/* Food&Events Tapahtumaravintolat project page: the "tapahtumasta tarinaksi" loop in the standard frame (1920 × 1220); the sides are cropped a little */
.v2-page .v2-project-media video[src$="/projects/foodandevents-tapahtumaravintolat/foodandevents-tapahtumaravintolat-07.mp4"] {
  aspect-ratio: 1920 / 1220;
  object-fit: cover;
}

/* HelmiSimpukka visual identity project page: picture 27 (logo) enlarged 20 % inside its frame; the clip keeps the visible frame and rounded corners */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka-identity/helmisimpukka-identity-27.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* HelmiSimpukka (art direction) project page: picture 19 enlarged 20 % inside its frame; the clip keeps the visible frame and rounded corners */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-19.jpg"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* Home page "Muita duuneja": four projects side by side on desktop, like the works page (three on narrow desktops) */
@media (min-width: 901px) { .v2-page .v2-work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1100px) { .v2-page .v2-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Desktop, home and Works: the HelmiSimpukka (visual identity) card picture 15 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-03.jpg"] { scale: 1.15; }
}

/* Desktop, home and Works: the Shell & St1 card picture 15 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/art-02.jpg"] { scale: 1.15; }
}

/* Desktop, home and Works: the Tekniska card picture 25 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-06.jpg"] { scale: 1.25; }
}

/* Desktop, home and Works: the Musiikkitalon Vapaapäivä card picture 10 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-08.jpg"] { scale: 1.1; }
}

/* Desktop, home and Works: the Sijoitu Lappeenrantaan card picture 5 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-12.jpg"] { scale: 1.05; }
}

/* Desktop, home and Works: the Food&Events Cups card picture 5 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/package-02.jpg"] { scale: 1.05; }
}

/* Desktop, home and Works: the Stora Enso Packaging card picture placed so the box sits in the middle of the frame horizontally
   (the box spans about 295–1768 of the picture's 1920 px, so its centre is at 1031; no enlargement) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/package-01.jpg"] { object-position: 74% 50%; }
}

/* Phones, Home and Works: the Restel menus card picture keeps its earlier position (46 %); the desktop position is set in the
   generator so that the poster and the dog sit in the middle of the wide frame */
@media (max-width: 760px) {
  .v2-page .v2-card[href$="restel-menus/"] .v2-img img { object-position: 46% 50% !important; }
}

/* Restel menus project page: picture 27 enlarged 10 % more (15 % in all); the clip keeps the visible frame and rounded corners */
.v2-page .v2-project-media img[src$="/projects/restel-menus/restel-menus-27.jpg"] {
  scale: 1.15;
  clip-path: inset(calc(100% * (1 - 1 / 1.15) / 2) round calc(var(--radius, 2px) / 1.15));
}

/* Legazy project page: the first content picture (the former hero) 35 % larger inside its frame; the clip keeps the frame and rounded corners */
.v2-page .v2-project-media img[src$="/projects/legazy/legazy-14.jpg"] {
  scale: 1.35;
  clip-path: inset(calc(100% * (1 - 1 / 1.35) / 2) round calc(var(--radius, 2px) / 1.35));
}

/* Desktop, home and Works: the Lappeenranta City Theatre card picture 7 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-07.jpg"] { scale: 1.07; }
}

/* Sijoittumismyynti project page: the wide former hero (02) sits with the brochure horizontally centred (49 % from the left) inside the standard frame */
.v2-page .v2-project-media img[src$="/projects/sijoittumismyynti/sijoittumismyynti-02.jpg"] { object-position: 49% 50%; }

/* Desktop, home and Works: the Auto-Kilta card picture 30 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-10.jpg"] { scale: 1.3; }
}

/* Desktop, home and Works: the BioRex card picture 10 % larger inside its frame and 5 % lower (the extra size covers the strip the shift opens at the top; the frame clips it).
   On phones the picture stays at 100 % */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/graphic-03.jpg"] { scale: 1.1; translate: 0 5%; }
}

/* Phones, home and Works: the BioRex card picture moved 5 % of the frame width to the left (the square frame shows 36 % of the picture's width as spare, so 5 % of the frame is about 9 points of object-position) */
@media (max-width: 760px) {
  .v2-card .v2-img img[src*="images/work/graphic-03.jpg"] { object-position: 58.7% 50%; }
}

/* Desktop, home and Works: the Traba card picture (square, shown in a 4:3 frame) pinned to its bottom edge, so the crop comes off the top */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/brand-01.jpg"] { object-position: 50% 100%; }
}

/* Traba project page, all screen sizes: the logo loop video enlarged 20 % inside its frame; the clip keeps the visible frame and rounded corners */
.v2-page .v2-project-media video[src$="/projects/traba/traba-27.mp4"] {
  scale: 1.2;
  clip-path: inset(calc(100% * (1 - 1 / 1.2) / 2) round calc(var(--radius, 2px) / 1.2));
}

/* Traba project page, phones only: the logo loop video a further 20 % larger (1.2 + 0.2 = 1.4 in total); the clip keeps the visible frame and rounded corners */
@media (max-width: 760px) {
  .v2-page .v2-project-media video[src$="/projects/traba/traba-27.mp4"] {
    scale: 1.4;
    clip-path: inset(calc(100% * (1 - 1 / 1.4) / 2) round calc(var(--radius, 2px) / 1.4));
  }
}
/* Grey placeholder box on a card until its picture arrives */
.v2-img-grey { display: block; background: #d9d9d9; }
/* OmaSp card picture zoomed 10 % on desktop */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/graphic-06.jpg"] { scale: 1.1; }
}

/* Desktop, home and Works: the HelmiSimpukka (art direction) card picture 15 % larger inside its frame (the frame clips it) */
@media (min-width: 761px) {
  .v2-card .v2-img img[src*="images/work/art-01.jpg"] { scale: 1.15; }
}

/* HelmiSimpukka project page, all screen sizes: the second line-counter sticker (38) 10 % larger inside the frame,
   grown from the right edge so the picture's right edge stays where it was; clipped back to its original size */
.v2-page .v2-project-media img[src$="/projects/helmisimpukka/helmisimpukka-38.jpg"] {
  scale: 1.1;
  transform-origin: right center;
  clip-path: inset(calc(100% * (1 - 1 / 1.1) / 2) 0 calc(100% * (1 - 1 / 1.1) / 2) calc(100% * (1 - 1 / 1.1))
                   round calc(var(--radius, 2px) / 1.1));
}