/* =========================================================
   FONTIT
   ========================================================= */
@import url(
  "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600;1,700&family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700&display=swap"
);
/* =========================================================
   VÄRIT, KOKOMUUTTUJAT JA PERUSASETUKSET
   ========================================================= */
:root {
  --ink: #161717;
  --cream: #fff6df;
  --paper: #fffaf0;
  --petrol: #145864;
  --petrol-dark: #0b343b;
  --petrol-soft: #d7e8df;
  --sun-soft: #f2cf78;
  --clay-soft: #e9aa92;
  --sage-soft: #cbded3;
  --lilac-soft: #d8d0e9;
  --accent: #f0b94f;
  --coral-muted: #d9735d;
  --teal: #2a9294;
  --sun: #ffcb47;
  --coral: #f06d57;
  --mint: #a8ddc8;
  --violet: #a79add;
  --line: rgba(22, 23, 23, 0.82);
  --max: 1240px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: var(--cream);
  background-image: radial-gradient(
    rgba(20, 20, 20, 0.035) 1px,
    transparent 1px
    );
  background-size: 7px 7px;
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.55;
}
a {
  color: inherit;
  text-decoration: none;
}
/* =========================================================
   YLEISET APU- JA LAYOUTLUOKAT
   ========================================================= */
.container {
  max-width: var(--max);
  margin: auto;
  padding: 0 24px;
}
/* Näppäimistökäyttäjien ohituslinkki */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  top: 16px;
  left: 16px;
  z-index: 99;
  padding: 10px;
  background: #fff;
}
/* =========================================================
   YLÄPALKKI JA NAVIGAATIO
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 246, 223, 0.92);
  backdrop-filter: blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 80px;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: Fraunces, serif;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}
.brand span {
  margin-left: 0;
  font: 500 0.67rem/1.1 DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 21px;
  font-size: 0.82rem;
  font-weight: 700;
}
.nav-links a {
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a.active {
  border-color: var(--coral);
}
.menu-button {
  display: none;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 0.84rem Manrope, sans-serif;
}
/* Tabletti ja mobiili */
@media (max-width: 750px) {
  .nav {
    position: relative;
  }
  .menu-button {
    display: block;
    position: relative;
    z-index: 3;
    margin-left: auto;
    cursor: pointer;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 24px;
    right: 24px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border: 2px solid var(--ink);
    background: var(--cream);
    box-shadow: 7px 7px 0 var(--ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.42s ease,
      opacity 0.24s ease,
      visibility 0s linear 0.42s;
  }
  .nav.open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.62s ease,
      opacity 0.24s ease,
      visibility 0s;
  }
  .nav-links a {
    display: block;
    padding: 12px 14px;
  }
}
/* =========================================================
   HERO / ETUSIVUN AVAUSOSIO
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  height: 820px;
  padding: 30px 40px 20px;
  border-bottom: 4px solid var(--ink);
  background: var(--petrol);
  color: #fff;
}
/* Hero-kuva ja sen päälle tuleva tummennus */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("images/hero-bg.jpeg") center / cover no-repeat;
  opacity: 0.94;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 44, 53, 0.78) 0%,
    rgba(8, 44, 53, 0.45) 37%,
    rgba(8, 44, 53, 0.13) 67%,
    rgba(8, 44, 53, 0.01) 100%
    );
}
/* =========================================================
   HERO: SISÄLTÖ, TEKSTIT JA MUOTOKUVA
   ========================================================= */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 76%) minmax(150px, 1fr);
  align-items: start;
}
.hero-copy {
  max-width: 800px;
  z-index: 3;
}
.eyebrow {
  display: inline-block;
  font: 500 0.86rem/1.25 DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero .eyebrow {
  padding: 10px 13px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--coral);
}
.degree {
  margin: 19px 0 14px;
  font: 500 0.72rem DM Mono, monospace;
  letter-spacing: 0.03em;
  color: #fff1cf;
}
.hero h1 {
  margin: 30px 0 22px;
  z-index: 19;
  font-family: Fraunces, serif;
  font-size: clamp(3.8rem, 7.9vw, 6.75rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fff;
  -webkit-text-stroke: 5px rgba(10, 39, 45, 0.65);
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(8, 32, 39, 0.55),
    5px 8px 12px rgba(8, 32, 39, 0.42);
}
.hero h1 em {
  font-style: normal;
  z-index: 19;
  color: var(--sun);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.08em;
  text-shadow: 2px 3px 0 rgba(8, 32, 39, 0.55),
    5px 8px 12px rgba(8, 32, 39, 0.42);
}
.hero-intro {
  max-width: 500px;
  z-index: 19;
  margin: 70px 0 28px;
  font-size: 1.28rem;
  font-weight: 500;
  text-shadow: -1px -1px 1px rgba(8, 32, 39, 0.95),
    1px -1px 1px rgba(8, 32, 39, 0.95),
    -1px 1px 1px rgba(8, 32, 39, 0.95),
    1px 1px 1px rgba(8, 32, 39, 0.95),
    0 3px 8px rgba(8, 32, 39, 0.8);
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border: 0;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--coral);
  font-size: 0.96rem;
  font-weight: 700;
}
.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--coral);
}
/* Hero-kuvan ja taustapaperin kokonaisalue */
.portrait {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: min(860px, 98vw);
  height: min(860px, 98vh);
  isolation: isolate;
}
.portrait img {
  position: absolute;
  z-index: 1;
  inset: auto -2% 0 auto;
  left: 70%;
  bottom: 0%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(6px -6px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(-6px -3px 10px rgba(0, 0, 0, 0.34));
}
@media (max-width: 950px) {
  .portrait img {
    transform: translateX(-36%) translateY(10%);
  }
  .hero {
    height: 900px;
  }
  .hero h1 {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0px, 0%);
    width: 100%;
  }
  .hero {
    height: 780px;
    padding: 20px 5px 30px;
  }
  .hero-intro {
    min-width: 300px;
    margin: 30px 0 28px;
  }
  .portrait img {
    transform: translateX(-40%) translateY(10%);
    width: 600px;
  }
}
@media (max-width: 340px) {
  .portrait img {
    transform: translateX(-30%) translateY(10%);
  }
  .hero-intro {
    min-width: 240px;
  }
}
/* =========================================================
   YLEISET SISÄLTÖOSIOT JA KORTIT
   ========================================================= */
section {
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 480px);
  align-items: end;
  gap: 42px;
  margin-bottom: 18px;
}
.section-head h2 {
  margin: 0;
  font: 700 clamp(2.7rem, 5vw, 5.1rem) / 0.9 Fraunces, serif;
  letter-spacing: -0.055em;
}
.section-head p {
  margin: 0;
  font-size: 1.02rem;
}
.entry-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.entry {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 290px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.2s,
    box-shadow 0.2s;
}
.entry:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--ink);
}
.entry small,
.label {
  font: 500 0.72rem DM Mono, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.entry h3 {
  margin: 12px 0;
  font: 700 2.1rem / 0.98 Fraunces, serif;
  letter-spacing: -0.04em;
}
.entry p {
  max-width: 38ch;
  margin: 0;
}
/* Vanhojen peruskorttien kuviot */
.entry.work {
  grid-column: span 3;
  background: repeating-linear-gradient(
    90deg,
    var(--sun) 0 13px,
    #ffd66d 13px 26px
    );
}
.entry.think {
  grid-column: span 3;
  background: repeating-linear-gradient(
    0deg,
    #d8f0e5 0 16px,
    #cae6dc 16px 32px
    );
}
.entry.projects {
  grid-column: span 3;
  background-color: #ffa18d;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.24) 25%,
    transparent 25% 75%,
    rgba(255, 255, 255, 0.24) 75%
    ),
    linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.24) 25%,
    transparent 25% 75%,
    rgba(255, 255, 255, 0.24) 75%
    );
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}
.entry.about {
  grid-column: span 3;
  background: repeating-linear-gradient(
    90deg,
    #d8d6f1 0 12px,
    #eee4b9 12px 24px,
    #f5b4aa 24px 36px
    );
}
.entry::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -60px;
  width: 165px;
  height: 165px;
  border: 20px solid rgba(20, 20, 20, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
/* =========================================================
   NOSTO-OSIO / STATEMENT
   ========================================================= */
.statement {
  background: #1b3037;
  background-image: linear-gradient(
    45deg,
    rgba(255, 203, 71, 0.15) 25%,
    transparent 25% 75%,
    rgba(255, 203, 71, 0.15) 75%
    ),
    linear-gradient(
    45deg,
    rgba(255, 203, 71, 0.15) 25%,
    transparent 25% 75%,
    rgba(255, 203, 71, 0.15) 75%
    );
  background-position: 0 0, 24px 24px;
  background-size: 48px 48px;
  color: #fff;
}
.statement-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 50px;
}
.statement h2 {
  margin: 0;
  font: 700 clamp(2.6rem, 4.8vw, 4.8rem) / 0.92 Fraunces, serif;
  letter-spacing: -0.055em;
}
.statement p {
  margin: 0;
  font: 700 clamp(1.45rem, 2.8vw, 2.6rem) / 1.12 Fraunces, serif;
  letter-spacing: -0.035em;
}
.statement .note {
  margin-top: 22px;
  font: 400 1rem / 1.6 Manrope, sans-serif;
  letter-spacing: 0;
}
@media (max-width: 500px) {
  .statement-grid {
    display: block;
    align-items: center;
  }
  .statement h2 {
    margin-bottom: 40px;
    text-align: center;
    font: 700 clamp(2.6rem, 4.8vw, 3.8rem) / 0.92 Fraunces, serif;
  }
  .statement p {
    text-align: center;
  }
}
/* =========================================================
   SISÄLTÖSIVUJEN HERO JA LEIVÄNMURUT
   ========================================================= */
.page-hero {
  padding: 75px 0 48px;
  border-bottom: 3px solid var(--ink);
  background: var(--cream);
}
.page-hero .label {
  display: inline-block;
  padding: 8px 10px;
  background: var(--sun);
  box-shadow: 5px 5px 0 var(--coral);
}
.page-hero h1 {
  margin: 24px 0 18px;
  font: 700 clamp(3.3rem, 7vw, 7.2rem) / 0.88 Fraunces, serif;
  letter-spacing: -0.04em;
  text-shadow: 2px 3px 0 rgba(8, 32, 39, 1),
    5px 8px 12px rgba(8, 32, 39, 1);
}
.page-hero p {
  max-width: 750px;
  font-size: 1.15rem;
    text-shadow: -1px -1px 1px rgba(8, 32, 39, 0.95),
    1px -1px 1px rgba(8, 32, 39, 0.95),
    -1px 1px 1px rgba(8, 32, 39, 0.95),
    1px 1px 1px rgba(8, 32, 39, 0.95),
    0 3px 8px rgba(8, 32, 39, 0.8);
}
.path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}
.path a,
.path span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  font: 500 0.72rem DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* =========================================================
   PANELIT, CASE-KORTIT JA FOOTER
   ========================================================= */
.detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: start;
}
.panel {
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.panel h2 {
  margin: 0 0 14px;
  font: 700 2.2rem / 0.98 Fraunces, serif;
  letter-spacing: -0.04em;
}
.panel h3 {
  margin: 18px 0 8px;
  font: 700 1.35rem / 1 Fraunces, serif;
}
.panel ul {
  margin: 12px 0;
  padding-left: 18px;
}
.panel.highlight {
  background: #d8f0e5;
}
.panel.coral {
  background: #ffd8d0;
}
.panel.violet {
  background: #e5defb;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.case {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.case:nth-child(3n + 1) {
  background: #fff2b2;
}
.case:nth-child(3n + 2) {
  background: #d7f0e8;
}
.case:nth-child(3n) {
  background: #f8c0b5;
}
.case h3 {
  margin: 10px 0;
  font: 700 1.7rem / 0.98 Fraunces, serif;
}
.tag {
  display: inline-block;
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid currentColor;
  background: var(--cream);
  font: 700 0.88rem DM Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer {
  padding: 56px 0;
  background: var(--ink);
  color: var(--cream);
}
.footer-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.footer h2 {
  margin: 0;
  font: 700 clamp(2.2rem, 4vw, 4.3rem) / 0.9 Fraunces, serif;
  letter-spacing: -0.05em;
}
.footer small {
  max-width: 500px;
  font: 500 0.72rem DM Mono, monospace;
  letter-spacing: 0.07em;
}
.contact {
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--sun);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
}
/* =========================================================
   MOBIILI / ALLE 600 PX
   ========================================================= */
@media (max-width: 600px) {
  .container {
    padding: 0 18px;
  }
  .brand {
    font-size: 1.05rem;
  }
  .brand span {
    display: block;
    margin: 3px 0 0;
    font-size: 0.54rem;
  }
  .nav {
    min-height: 74px;
  }
  .hero h1 {
    font-size: clamp(1.7rem, 11vw, 3rem);
    line-height: 1.2;
    position: relative;
    z-index: 4;
  }
  .hero .eyebrow {
    max-width: 95%;
    padding: 10px;
    font-size: 0.71rem;
  }
  .degree {
    max-width: 88%;
    font-size: 0.72rem;
    position: relative;
    z-index: 4;
  }
  .hero-intro {
    max-width: 66%;
    font-size: 0.89rem;
    position: relative;
    line-height: 1.5;
    z-index: 4;
  }
  .section {
    padding: 62px 0;
  }
  .section-head {
    gap: 18px;
  }
  .section-head h2 {
    font-size: 3.1rem;
  }
  .entry.work,
  .entry.think,
  .entry.projects,
  .entry.about {
    grid-column: span 12;
    min-height: 240px;
  }
  .statement {
    padding: 62px 0;
  }
  .statement p {
    font-size: 1.55rem;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .page-hero h1 {
    font-size: 3.6rem;
  }
  .footer-grid {
    display: block;
  }
  .footer small {
    display: block;
    margin-top: 30px;
  }
  .button {
    position: relative;
    z-index: 4;
  }
}
/* =========================================================
   TYÖSKENTELYN ALUEET / YKSI YHTEINEN SVG-PALAPELI
   ========================================================= */
.entry-puzzle {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 920;
  margin: 0;
}
.puzzle-board {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.puzzle-piece {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
  filter: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .34s cubic-bezier(.2,.75,.25,1);
}
/* Varjo on oma, palan alle jäävä kerroksensa.
   Se ei liiku palan mukana, vaan tulee näkyviin palan noustessa. */
.puzzle-piece-shadow {
  fill: var(--ink);
  stroke: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(5px, 8px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .3s ease;
}
.puzzle-board a:hover .puzzle-piece-shadow,
.puzzle-board a:focus-visible .puzzle-piece-shadow {
  opacity: .68;
}
.puzzle-board a:hover .puzzle-piece,
.puzzle-board a:focus-visible .puzzle-piece {
  transform: translate(-4px,-6px);
}
.puzzle-copy {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  color: var(--cream);
}
.puzzle-copy small {
  margin-top: 15px;
  font: 500 clamp(0.9rem,2vw,1.2rem)/1 DM Mono,monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0px 0px 1px rgb(0, 0, 0),
    0px 0px 2px rgb(0, 0, 0),
    0px 0px 3px rgb(0, 0, 0);
}
.puzzle-copy h3 {
  margin: 12px 0;
  font: 700 clamp(1.8rem,4vw,3.3rem)/.98 Fraunces,serif;
  letter-spacing: -.04em;
  text-shadow: 0px 0px 2px rgb(0, 0, 0),
    0px 0px 5px rgb(0, 0, 0);
}
@media (max-width: 750px) {
  .puzzle-copy small {
    margin-top: 5px;
  }
  .puzzle-copy h3 {
    margin: 6px 0;
    font: 700 clamp(2.2rem,4vw,2.6rem)/.98 Fraunces,serif;
  }
}
.puzzle-copy p {
  max-width: 38ch;
  margin: 0;
  color: var(--cream);
  font-size: clamp(10px, 2vw, 18px);
  text-shadow: 0px 0px 1px rgb(0, 0, 0),
    0px 0px 2px rgb(0, 0, 0);
}
.puzzle-copy span {
  font-weight: 600;
  font-size: clamp(12px, 2vw, 16px);
}
/* 01 / vasen ylä */
.work-copy {
  left: 3.5%;
  top: 5%;
  width: 42%;
  height: 40%;
}
/* 03 / vasen ala */
.projects-copy {
  left: 3.5%;
  top: 54%;
  width: 42%;
  height: 38%;
}
/* 02 / oikea ylä */
.think-copy {
  left: 52.2%;
  top: 5%;
  width: 41%;
  height: 39%;
}
/* 04 / oikea ala */
.about-copy {
  left: 52.2%;
  top: 53%;
  width: 41%;
  height: 39%;
}
/* =========================================================
   MOBIILI: YKSI PYSTYSUORA SVG-PALAPELI
   ========================================================= */
.puzzle-board-mobile {
  display: none;
}
@media (max-width:600px) {
  .entry-puzzle {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 480 / 1500;
    margin: 0;
  }
  /* Desktopin leveä palapeli pois */
  .puzzle-board {
    display: none;
  }
  /* Mobiilin pystysuora palapeli näkyviin */
  .puzzle-board-mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  /* Mobiilissa aktiivinen pala nousee; varjo jää palapelin tasoon. */
  .puzzle-board-mobile a .puzzle-piece,
.puzzle-copy {
    transition: transform .42s cubic-bezier(.2,.75,.25,1);
  }
  .puzzle-board-mobile .puzzle-piece-shadow {
    transition: opacity .26s ease;
  }
  .puzzle-board-mobile a.is-active .puzzle-piece {
    transform: translate(-4px,-6px);
    filter: none;
  }
  .puzzle-board-mobile a.is-active .puzzle-piece-shadow {
    opacity: .42;
  }
  .puzzle-copy.is-active {
    transform: translate(-4px,-6px);
  }
  /* Mobiili-SVG:n reunaviiva pysyy oikeasti pikselikokoisena */
  .puzzle-board-mobile .puzzle-piece {
    vector-effect: non-scaling-stroke;
    stroke-width: 3;
  }
  /* Tekstit takaisin SVG:n päälle */
  .puzzle-copy {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    pointer-events: none;
  }
  /* 01 / Työskentely */
  .work-copy {
    left: 8.5%;
    top: 3.7%;
    width: 77%;
    height: 18.5%;
  }
  /* 02 / Ajattelu */
  .think-copy {
    left: 8.5%;
    top: 26.5%;
    width: 77%;
    height: 18.5%;
  }
  /* 03 / Valitut työt */
  .projects-copy {
    left: 8.5%;
    top: 50.7%;
    width: 77%;
    height: 18.5%;
  }
  /* 04 / Minusta */
  .about-copy {
    left: 8.5%;
    top: 74.8%;
    width: 77%;
    height: 19%;
  }
  .puzzle-copy h3 {
    font-size: clamp(1.75rem,6vw,3.1rem);
    line-height: .98;
    margin: 10px 0;
  }
  .puzzle-copy p {
    font-size: .96rem;
    line-height: 1.48;
    color: var(--cream);
  }
  .puzzle-copy small {
    font-size: .88rem;
  }
  .puzzle-copy span {
    font-size: 1.25rem;
    font-weight: 700;
  }
  .puzzle-board-mobile a {
    cursor: pointer;
  }
  .puzzle-board-mobile a:hover .puzzle-piece,
  .puzzle-board-mobile a:focus-visible .puzzle-piece {
    transform: translate(-4px,-6px);
    filter: none;
  }
  .puzzle-board-mobile a:hover .puzzle-piece-shadow,
  .puzzle-board-mobile a:focus-visible .puzzle-piece-shadow {
    opacity: .42;
  }
}
.image-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 72px 0 55px;
  color: #fff;
  background: var(--petrol);
  border-bottom: 4px solid var(--ink);
}
.image-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("images/hero-bg.jpeg") center/cover no-repeat;
}
.image-hero .container {
  position: relative;
  z-index: 1;
}
.image-hero .label {
  display: inline-block;
  padding: 9px 11px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--coral);
}
.image-hero h1 {
  color: #fff;
  margin: 22px 0 15px;
  text-shadow: 1px 1px 0 rgba(8,32,39,1),-1px -1px 4px rgba(8,32,39,1);
}
.image-hero p {
  max-width: 740px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
    text-shadow: -1px -1px 1px rgba(8, 32, 39, 0.95),
    1px -1px 1px rgba(8, 32, 39, 0.95),
    -1px 1px 1px rgba(8, 32, 39, 0.95),
    1px 1px 1px rgba(8, 32, 39, 0.95),
    0 3px 8px rgba(8, 32, 39, 0.8);
}
.hero-work .page-hero-overlay {
  background: linear-gradient(90deg,rgba(10,63,68,.74),rgba(10,63,68,.48) 55%,rgba(255,203,71,.12));
}
.hero-think .page-hero-overlay {
  background: linear-gradient(90deg,rgba(27,73,77,.76),rgba(27,73,77,.45) 55%,rgba(168,221,200,.14));
}
.hero-projects .page-hero-overlay {
  background: linear-gradient(90deg,rgba(104,47,43,.74),rgba(104,47,43,.43) 55%,rgba(240,109,87,.12));
}
.content-intro {
  display: block;
  max-width: 900px;
  margin-bottom: 42px;
}
.content-intro h2 {
  max-width: 22ch;
  margin: 0 0 18px;
  font: 700 clamp(3.85rem, 4.8vw, 4.9rem) / .91 Fraunces, serif;
  letter-spacing: -.055em;
}
.content-intro p {
  max-width: 700px;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 18px;
}
.showcase-card {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--line);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform .62s,box-shadow .62s;
}
.showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: 8px 8px 10px var(--ink);
}
.showcase-card h3,.method-card h3,.project-card h3 {
  font: 700 clamp(1.8rem,2.8vw,2.75rem)/.97 Fraunces,serif;
  letter-spacing: -.045em;
  margin: 12px 0;
}
.showcase-card p {
  max-width: 33ch;
  font-size: 16px;
  font-weight: 600;
}
.showcase-card a {
  font-weight: 700;
}
.direction-card {
  grid-column: span 7;
  background: #f7bc61;
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 3px,transparent 3px 6px);
}
.teaching-card {
  grid-column: span 5;
  background: #ccece3;
  background-image: repeating-linear-gradient(0deg,rgba(20,20,20,.08) 0 1px,transparent 1px 18px);
}
.writing-card {
  grid-column: span 5;
  background: #e7dcff;
  background-image: linear-gradient(45deg,rgba(20,20,20,.09) 25%,transparent 25% 75%,rgba(20,20,20,.09) 75%),linear-gradient(45deg,rgba(20,20,20,.09) 25%,transparent 25% 75%,rgba(20,20,20,.09) 75%);
  background-position: 0 0,4px 4px;
  background-size: 8px 8px;
}
.develop-card {
  grid-column: span 7;
  background: #f9b2a4;
  background-image: radial-gradient(rgba(20,20,20,.17) 1px,transparent 1px);
  background-size: 11px 11px;
}
.showcase-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border: 18px solid rgba(20,20,20,.12);
  border-radius: 50%;
}
.content-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-coral {
  background: #ffc1b5;
  background-image: linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25% 75%,rgba(255,255,255,.3) 75%),linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25% 75%,rgba(255,255,255,.3) 75%);
  background-position: 0 0,18px 18px;
  background-size: 36px 36px;
}
.band-violet {
  background: #e7ddff;
  background-image: repeating-linear-gradient(90deg,rgba(240,109,87,.22) 0 12px,transparent 12px 24px);
}
.band-yellow {
  background: #ffe58b;
  background-image: repeating-linear-gradient(45deg,rgba(20,20,20,.09) 0 1px,transparent 1px 16px);
}
.band-mint {
  background: #cff0e4;
  background-image: repeating-linear-gradient(0deg,rgba(20,20,20,.09) 0 1px,transparent 1px 20px);
}
.band-head {
  display: grid;
  grid-template-columns: 1fr minmax(260px,470px);
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}
.band-head h2 {
  font: 700 clamp(2.6rem,5vw,5rem)/.9 Fraunces,serif;
  letter-spacing: -.055em;
  margin: 14px 0 0;
}
.band-head p {
  margin: 0;
}
.placeholder-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.placeholder-row article,.research-grid article {
  border: 1px solid var(--line);
  background: rgba(255,250,240,.7);
  padding: 22px;
  min-height: 175px;
}
.placeholder-row article span,.mini-list article span {
  font: 500 .78rem DM Mono,monospace;
}
.placeholder-row h3,.research-grid h3 {
  font: 700 1.55rem/1 Fraunces,serif;
  margin: 24px 0 8px;
}
.placeholder-row.wide {
  grid-template-columns: repeat(2,1fr);
}
.split-feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
}
.pattern-note {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 30px;
  min-height: 370px;
}
.pattern-note h2 {
  font: 700 clamp(1.6rem,4vw,2.2rem)/.94 Fraunces,serif;
  letter-spacing: -.055em;
  max-width: 20ch;
  margin: 14px 0;
}
.mint-note {
  background: #cff0e4;
  background-size: 13px 13px;
}
.coral-note {
  background: #ffb3a6;
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 12px,transparent 12px 24px);
}
.mini-list {
  display: grid;
  gap: 14px;
}
.mini-list article {
  border: 1px solid var(--line);
  padding: 20px;
  background: var(--paper);
}
.mini-list h3 {
  font: 700 1.5rem/1 Fraunces,serif;
  margin: 8px 0;
}
.mini-list p {
  margin: 0;
}
.tool-grid,.method-grid,.project-grid,.research-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.tool-card,.method-card,.project-card {
  position: relative;
  min-height: 255px;
  padding: 24px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s,box-shadow .2s;
}
.tool-card:hover,.method-card:hover,.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 8px 8px 0 var(--ink);
}
.replat {
  background: #d8f0e5;
  background-image: linear-gradient(90deg,rgba(20,20,20,.12) 1px,transparent 1px),linear-gradient(rgba(20,20,20,.12) 1px,transparent 1px);
  background-size: 22px 22px;
}
.pass {
  background: #ffd96c;
  background-image: repeating-linear-gradient(45deg,rgba(20,20,20,.12) 0 1px,transparent 1px 15px);
}
.future {
  background: #e5defb;
  background-image: radial-gradient(rgba(20,20,20,.15) 1px,transparent 1px);
  background-size: 12px 12px;
}
.method-card:nth-child(1) {
  background: #ffcf5c;
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 12px,transparent 12px 24px);
}
.method-card:nth-child(2) {
  background: #bfe7db;
  background-image: repeating-linear-gradient(0deg,rgba(20,20,20,.1) 0 1px,transparent 1px 19px);
}
.method-card:nth-child(3) {
  background: #f8ad9f;
  background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25% 75%,rgba(255,255,255,.25) 75%),linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25% 75%,rgba(255,255,255,.25) 75%);
  background-position: 0 0,15px 15px;
  background-size: 30px 30px;
}
.method-card:nth-child(4) {
  background: #dcd6f3;
  background-image: repeating-linear-gradient(90deg,rgba(240,109,87,.24) 0 11px,transparent 11px 22px);
}
.method-card:nth-child(5) {
  background: #fff0b2;
  background-image: radial-gradient(rgba(20,20,20,.16) 1px,transparent 1px);
  background-size: 11px 11px;
}
.method-card:nth-child(6) {
  background: #d8efe9;
  background-image: linear-gradient(135deg,transparent 0 48%,rgba(20,20,20,.1) 48% 52%,transparent 52%);
}
.project-card {
  min-height: 295px;
}
.project-year {
  font: 500 .7rem DM Mono,monospace;
  letter-spacing: .08em;
}
.project-direction {
  background: #ffcf5c;
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 13px,transparent 13px 26px);
}
.project-text {
  background: #f6b0a2;
  background-image: linear-gradient(45deg,rgba(255,255,255,.27) 25%,transparent 25% 75%,rgba(255,255,255,.27) 75%),linear-gradient(45deg,rgba(255,255,255,.27) 25%,transparent 25% 75%,rgba(255,255,255,.27) 75%);
  background-position: 0 0,16px 16px;
  background-size: 32px 32px;
}
.project-ped {
  background: #c9ece0;
  background-image: repeating-linear-gradient(0deg,rgba(20,20,20,.1) 0 1px,transparent 1px 18px);
}
.project-research {
  background: #e1dbf7;
  background-image: repeating-linear-gradient(90deg,rgba(240,109,87,.22) 0 11px,transparent 11px 22px);
}
.project-app {
  background: #fff0b4;
  background-image: radial-gradient(rgba(20,20,20,.16) 1px,transparent 1px);
  background-size: 11px 11px;
}
.project-concept {
  background: #bfe2dc;
  background-image: linear-gradient(135deg,transparent 0 48%,rgba(20,20,20,.11) 48% 52%,transparent 52%);
}
.research-grid {
  grid-template-columns: 1fr 1fr;
}
.research-grid article {
  min-height: 240px;
}
.research-grid article:nth-child(1) {
  background: #fff5cd;
}
.research-grid article:nth-child(2) {
  background: #dceeff;
}
.research-grid a {
  font-weight: 700;
}
.hero-work::before {
  background-image: url("images/hero-work.jpg");
}
.hero-think::before {
  background-image: url("images/hero-think.jpg");
}
.hero-projects::before {
  background-image: url("images/hero-projects.jpg");
}
/* Minusta / CV / yhteys */
.hero-about::before {
  background-image: url("images/hero-about.jpg");
}
.hero-about .page-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(74, 49, 92, .78) 0%,
    rgba(74, 49, 92, .48) 54%,
    rgba(167, 154, 221, .16) 100%
    );
}
/* Valinnainen oma kuva:
.hero-about::before{background-image:url("images/hero-about.jpeg");}*/
/* Työskentely-sivun viisi osaamiskorttia */
.work-roles-five .showcase-card {
  grid-column: span 4;
}
/* Ylärivi: kaksi leveää korttia */
.work-roles-five .showcase-card:nth-child(1),
.work-roles-five .showcase-card:nth-child(2) {
  grid-column: span 6;
}
/* Alarivi: kolme yhtä leveää korttia */
.work-roles-five .showcase-card:nth-child(3),
.work-roles-five .showcase-card:nth-child(4),
.work-roles-five .showcase-card:nth-child(5) {
  grid-column: span 4;
}
.library {
  background: var(--paper);
}
.shelf {
  display: flex;
  align-items: end;
  gap: 7px;
  min-height: 185px;
  padding: 18px 18px 0;
  border: 1px solid var(--line);
  background: linear-gradient(rgba(22,23,23,.11) 1px,transparent 1px),
    #f6df9d;
  background-size: 100% 18px;
  overflow: hidden;
}
.book {
  height: var(--h);
  min-width: 34px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  border: 1px solid rgba(22,23,23,.65);
  border-bottom: 0;
  background: var(--violet);
  color: var(--ink);
  font: 500 .68rem/1 DM Mono,monospace;
  letter-spacing: .04em;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.book:nth-child(3n+2) {
  background: var(--coral);
}
.book:nth-child(3n+3) {
  background: var(--mint);
}
.book:nth-child(4n+1) {
  background: var(--sun);
}
@media (max-width:900px) {
  .work-roles-five .showcase-card,
  .work-roles-five .showcase-card:nth-child(5) {
    grid-column: span 6;
  }
}
@media (max-width:600px) {
  .work-roles-five .showcase-card,
  .work-roles-five .showcase-card:nth-child(5) {
    grid-column: span 12;
  }
  .shelf {
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .book {
    min-width: 21px;
    font-size: .48rem;
  }
}
/* TYÖSKENTELY: viisi osaamiskorttia */
/* Poista korttien oikean alakulman ympyräkoristeet */
.work-roles-five .showcase-card::after {
  display: none;
}
/* Desktop: kaksi leveää ylös, kolme alle */
.work-roles-five .showcase-card:nth-child(1),
.work-roles-five .showcase-card:nth-child(2) {
  grid-column: span 6;
}
.work-roles-five .showcase-card:nth-child(3),
.work-roles-five .showcase-card:nth-child(4),
.work-roles-five .showcase-card:nth-child(5) {
  grid-column: span 4;
}
/* Viides kortti: oma ilme näyttelijälle */
.work-roles-five .showcase-card:nth-child(5) {
  background-color: #ffe58b;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, .10) 0 1px,
    transparent 1px 15px
    );
}
/* Tablet: kaksi korttia rinnakkain */
@media (max-width: 900px) {
  .work-roles-five .showcase-card,
  .work-roles-five .showcase-card:nth-child(1),
  .work-roles-five .showcase-card:nth-child(2),
  .work-roles-five .showcase-card:nth-child(3),
  .work-roles-five .showcase-card:nth-child(4),
  .work-roles-five .showcase-card:nth-child(5) {
    grid-column: span 6;
    min-width: 0;
  }
}
/* Puhelin: yksi täysleveä kortti kerrallaan */
@media (max-width: 600px) {
  .work-roles-five {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .work-roles-five .showcase-card,
  .work-roles-five .showcase-card:nth-child(1),
  .work-roles-five .showcase-card:nth-child(2),
  .work-roles-five .showcase-card:nth-child(3),
  .work-roles-five .showcase-card:nth-child(4),
  .work-roles-five .showcase-card:nth-child(5) {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 280px;
  }
  .work-roles-five .showcase-card h3 {
    font-size: clamp(2rem, 10vw, 3rem);
    overflow-wrap: anywhere;
  }
}
.education-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.education-list li {
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(22, 23, 23, .25);
}
.education-list li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.education-list strong {
  font-family: Fraunces, serif;
  font-size: 1.2rem;
  line-height: 1.05;
}
/* =========================================================
   ESITTELY: YHTENÄISET JATKOLINKIT
   ========================================================= */
.section-more {
  --section-more-accent: var(--sun);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow"
    "title arrow"
    "description arrow";
  gap: 7px 24px;
  align-items: center;
  margin-top: 38px;
  padding: 20px 22px 21px 30px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  cursor: pointer;
  transition: transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}
.section-more::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--section-more-accent);
}
.section-more__label {
  grid-area: label;
  font: 500 .67rem/1 "DM Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section-more__title {
  grid-area: title;
  font: 700 clamp(1.55rem, 2.2vw, 2.15rem)/1 Fraunces, serif;
  letter-spacing: -.035em;
}
.section-more__description {
  grid-area: description;
  max-width: 64ch;
  font-size: .86rem;
  line-height: 1.42;
}
.section-more__arrow {
  grid-area: arrow;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: 500 1.15rem/1 "DM Mono", monospace;
  transition: transform .2s ease;
}
.section-more:hover,
.section-more:focus-visible {
  transform: translate(-3px, -3px);
  background: #fffdf7;
  box-shadow: 10px 10px 0 var(--ink);
}
.section-more:hover .section-more__arrow,
.section-more:focus-visible .section-more__arrow {
  transform: translateX(4px);
}
.section-more:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
/* Osion väri toimii tunnisteena, ei koko painikkeen taustana */
.section-more--director {
  --section-more-accent: var(--coral);
}
.section-more--pedagogy {
  --section-more-accent: var(--violet);
}
.section-more--projects {
  --section-more-accent: #f2ad98;
}
.section-more--writing {
  --section-more-accent: #dce6bf;
}
.section-more--development {
  --section-more-accent: #9fbfc4;
}
/* Kaksi samanarvoista jatkoreittiä rinnakkain */
.section-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 38px;
}
.section-more-grid .section-more {
  height: 100%;
  margin-top: 0;
}
/* Sama navigaatiokieli pienemmässä koossa sisältökokonaisuuden sisällä */
.section-more--compact {
  min-width: min(100%, 360px);
  margin-top: 0;
  padding: 15px 18px 16px 23px;
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--ink);
  grid-template-areas: "label arrow"
    "title arrow";
}
.section-more--compact .section-more__title {
  font-size: 1.25rem;
}
.section-more--compact .section-more__description {
  display: none;
}
.section-more--compact .section-more__arrow {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}
.section-more--compact:hover,
.section-more--compact:focus-visible {
  box-shadow: 8px 8px 0 var(--ink);
}
/* Kehittäjäprofiili on jo grid, joten sen lopussa ei tarvita lisämarginaalia */
.developer-profile > .section-more {
  margin-top: 0;
}
@media (max-width: 700px) {
  .section-more-grid {
    grid-template-columns: 1fr;
  }
  .section-more {
    gap: 7px 16px;
    padding: 19px 18px 20px 26px;
  }
  .section-more__arrow {
    width: 42px;
    height: 42px;
  }
  .section-more--compact {
    min-width: 0;
    width: 100%;
  }
}
/* OHJAAJA-OSIO */
.director-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 68px 0 78px;
  background: linear-gradient(
    115deg,
    transparent 0 10%,
    rgba(255, 203, 71, .94) 34% 66%,
    transparent 76% 100%
    ),
    repeating-linear-gradient(
    90deg,
    #d95343 0 84px,
    #ef7f67 64px 68px
    );
}
.director-section > .container {
  position: relative;
  z-index: 1;
}
/* Avaus */
.director-section .band-head {
  display: block;
  max-width: 1040px;
  margin: 0 0 40px;
}
.director-section .band-head .label {
  display: inline-block;
  margin: 0 0 17px;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font-size: 16px;
}
.director-section .band-head h2 {
  max-width: 940px;
  margin: 0 0 22px;
  font-size: clamp(3rem, 6vw, 5.55rem);
  line-height: .88;
}
.director-section .band-head p {
  max-width: 800px;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.52;
}
/* Profiilin teksti ja kolme taiteellista painotusta */
.director-profile-v2 {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: 24px;
  align-items: start;
}
.director-profile-v2__text {
  padding: clamp(28px, 3.2vw, 38px);
  border: 2px solid var(--ink);
  color: var(--cream);
  background: #000000;
  box-shadow: 8px 8px 0 rgba(22, 23, 23, .28);
}
.director-profile-v2__text p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.58;
}
.director-profile-v2__text p + p {
  margin-top: 1.45em;
}
.director-profile-v2__focus {
  display: grid;
  gap: 13px;
}
.director-profile-v2__focus article {
  padding: 22px 24px 24px;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .2);
}
.director-profile-v2__focus article:nth-child(2) {
  background: #c8e7dc;
}
.director-profile-v2__focus article:nth-child(3) {
  background: #ddd4f3;
}
.director-profile-v2__focus span {
  display: block;
  margin-bottom: 12px;
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
}
.director-profile-v2__focus h3 {
  max-width: 26ch;
  margin: 0 0 10px;
  font: 700 clamp(1.45rem, 2.1vw, 1.9rem)/1 Fraunces, serif;
  letter-spacing: -.035em;
}
.director-profile-v2__focus p {
  max-width: 60ch;
  margin: 0;
  font-size: .98rem;
  line-height: 1.48;
}
/* Taiteellinen kiteytys */
.director-profile-v2__quote {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 24px 30px;
  border: 2px solid var(--ink);
  background: var(--sun);
  box-shadow: 8px 8px 0 var(--ink);
  text-align: center;
}
.director-profile-v2__quote p {
  margin: 0;
  font: 700 clamp(1.65rem, 3vw, 2.8rem)/1 Fraunces, serif;
  letter-spacing: -.04em;
}
@media (max-width: 900px) {
  .director-profile-v2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .director-section {
    padding: 58px 0 64px;
  }
  .director-section .band-head {
    margin-bottom: 32px;
  }
  .director-section .band-head p {
    font-size: 1.06rem;
  }
  .director-profile-v2__text {
    padding: 26px 22px;
    box-shadow: 6px 6px 0 rgba(22, 23, 23, .28);
  }
  .director-profile-v2__text p {
    font-size: 1rem;
  }
  .director-profile-v2__focus article {
    padding: 20px;
  }
  .director-profile-v2__quote {
    padding: 22px 20px;
    box-shadow: 6px 6px 0 var(--ink);
  }
}
/* =========================================================
   TYÖSKENTELY-SIVU: MOBIILIKORJAUKSET
   Lisää styles.css-tiedoston loppuun
   ========================================================= */
@media (max-width: 760px) {
  /* Estää leveiden elementtien aiheuttaman vaakarullauksen */
  .page-work {
    overflow-x: hidden;
  }
  .page-work .container {
    width: min(100% - 32px, 1180px);
  }
  /* Hero */
  .page-work .page-hero {
    min-height: auto;
    padding: 112px 0 64px;
  }
  .page-work .page-hero h1,
  .page-think .page-hero h1,
  .page-projects .page-hero h1 {
    font-size: clamp(2.65rem, 12vw, 4.2rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
  }
  .page-work .page-hero p,
  .page-think .page-hero p,
  .page-projects .page-hero p {
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.55;
  }
  /* Yleiset osioiden välit */
  .page-work section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .page-work .content-band {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .page-work .content-intro,
  .page-work .band-head,
  .page-work .section-head {
    max-width: none;
  }
  .page-work h2 {
    font-size: clamp(2rem, 9vw, 3.1rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .page-work h3 {
    font-size: 1.35rem;
    line-height: 1.08;
  }
  /* Viisi roolikorttia */
  .page-work .work-showcase,
  .page-work .work-roles-five,
  .page-work .showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-work .showcase-card {
    min-height: 0;
    padding: 26px 22px;
  }
  /* Ohjaaja-, kirjoittaja- ja näyttelijäosiot */
  .page-work .split-feature,
  .page-work .director-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: stretch;
  }
  .page-work .pattern-note {
    padding: 28px 22px;
  }
  .page-work .mini-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-work .mini-list article {
    padding: 22px;
  }
  /* Opettaja- ja koulutusosiot */
  .page-work .detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  .page-work .panel {
    padding: 26px 22px;
  }
  .page-work .panel ul,
  .page-work .education-list {
    padding-left: 1.15rem;
  }
  .page-work .education-list li {
    margin-bottom: 24px;
  }
  /* Kehittäjäosion kortit */
  .page-work .tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-work .tool-card {
    min-height: 0;
    padding: 26px 22px;
  }
  /* Kirjahylly: kaksi kirjaa riville, ei puristu mahdottomaksi */
  .page-work .shelf {
    display: flex;
    align-items: end;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 28px 4px 14px;
    margin-left: -4px;
    margin-right: -4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .page-work .book {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    height: min(var(--h), 150px);
    min-height: 68px;
    padding: 8px 6px;
    font-size: 0.66rem;
    line-height: 1;
    overflow: hidden;
  }
  /* Linkit eivät jää liian lähelle seuraavaa osiota */
  .page-work .content-band > .container > p:last-child,
  .page-work section > .container > p:last-child {
    margin-top: 30px;
    margin-bottom: 0;
  }
}
/* Pienimmät puhelimet */
@media (max-width: 420px) {
  .page-work .container {
    width: min(100% - 24px, 1180px);
  }
  .page-work .page-hero {
    padding-top: 96px;
    padding-bottom: 52px;
  }
  .page-work .page-hero h1,
  .page-think .page-hero h1,
  .page-projects .page-hero h1 {
    font-size: clamp(2.35rem, 12.5vw, 3.3rem);
  }
  .page-work .showcase-card,
  .page-work .pattern-note,
  .page-work .panel,
  .page-work .tool-card,
  .page-work .mini-list article {
    padding: 22px 18px;
  }
  .page-work .shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}
/* Kirjoittajaosion otsikko selkeäksi */
.content-band .band-head {
  display: block;
  max-width: 900px;
}
.content-band .band-head .label {
  display: inline-block;
  margin-bottom: 16px;
}
.content-band .band-head h2 {
  margin: 0 0 22px;
}
.content-band .band-head p {
  max-width: 680px;
  margin: 0;
}
@media (max-width: 760px) {
  #kirjoittaja .band-head {
    display: block;
  }
  #kirjoittaja .band-head h2 {
    font-size: clamp(2.35rem, 11vw, 3.5rem);
    line-height: 0.94;
    margin-bottom: 22px;
  }
  #kirjoittaja .band-head p {
    max-width: 32rem;
    font-size: 1.08rem;
    line-height: 1.5;
  }
}
/* Työskentely-sivun intro-osiot mobiilissa */
@media (max-width: 760px) {
  .page-work .content-intro {
    display: block;
    max-width: none;
  }
  .page-work .content-intro h2 {
    max-width: none;
    margin: 0 0 20px;
    font-size: clamp(2.45rem, 11.5vw, 3.8rem);
    line-height: 0.93;
    letter-spacing: -0.045em;
  }
  .page-work .content-intro p {
    max-width: 44rem;
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.52;
  }
}
/* =========================================================
   KAIKKIEN SISÄLTÖSIVUJEN MOBIILIGRIDIT
   ========================================================= */
@media (max-width: 760px) {
  /* Otsikko ja ingressi allekkain */
  .content-intro,
  .band-head,
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .content-intro {
    margin-bottom: 28px;
  }
  .content-intro h2,
  .band-head h2,
  .section-head h2 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(2.45rem, 11vw, 3.75rem);
    line-height: 0.93;
    overflow-wrap: anywhere;
  }
  .content-intro p,
  .band-head p,
  .section-head p {
    max-width: 46rem;
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.52;
  }
  /* Ajattelu-, työskentely- ja projektikortit yksi kerrallaan */
  .tool-grid,
  .method-grid,
  .project-grid,
  .research-grid,
  .placeholder-row,
  .placeholder-row.wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .method-card,
  .tool-card,
  .project-card,
  .research-grid article,
  .placeholder-row article {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .method-card {
    min-height: 300px;
    padding: 24px 22px;
  }
  .method-card h3,
  .tool-card h3,
  .project-card h3 {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 3rem);
    overflow-wrap: anywhere;
  }
  .split-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .research-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* AJATTELU & MENETELMÄT — lisätyylit */
.quote-band {
  padding: 54px 0;
}
.pull-quote,.closing-quote {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote p,.closing-quote p {
  margin: 20px;
  font: 700 clamp(1.6rem,3.7vw,3.5rem)/.96 Fraunces,serif;
  letter-spacing: -.05em;
}
.pull-quote footer,.closing-quote footer {
  margin: 30px;
  font: 500 .78rem/1.4 DM Mono,monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.method-grid-wide .method-card {
  min-height: 300px;
}
.quote-card,.feedback-highlight {
  margin-top: 28px;
  padding: 28px 30px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--coral);
}
.quote-card p,.feedback-highlight p {
  margin: 0;
  font: 700 clamp(1.45rem,2.5vw,2.5rem)/1.05 Fraunces,serif;
  letter-spacing: -.03em;
}
.quote-card span,.feedback-highlight span {
  display: block;
  margin-top: 15px;
  font: 500 .74rem DM Mono,monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.steps-list {
  margin: 0;
  padding-left: 1.3rem;
}
.steps-list li {
  margin: 0 0 12px;
}
.feedback-stack {
  display: grid;
  gap: 14px;
}
.feedback-stack blockquote {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.feedback-stack blockquote:nth-child(2) {
  background: #fff0b2;
}
.feedback-stack blockquote:nth-child(3) {
  background: #e5defb;
}
.feedback-stack p {
  margin: 0;
  font: 700 1.12rem/1.28 Fraunces,serif;
}
.feedback-stack footer {
  margin-top: 12px;
  font: 500 .7rem DM Mono,monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bloom-path {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.bloom-path article {
  min-height: 235px;
  padding: 22px 18px;
  background: var(--paper);
  border-right: 1px solid var(--ink);
}
.bloom-path article:nth-child(2n) {
  background: var(--mint);
}
.bloom-path article:nth-child(3n) {
  background: #ffe58b;
}
.bloom-path article:last-child {
  border-right: 0;
}
.bloom-path span {
  font: 500 .72rem DM Mono,monospace;
}
.bloom-path h3 {
  margin: 30px 0 10px;
  font: 700 1.55rem/.98 Fraunces,serif;
}
.bloom-path p {
  margin: 0;
  font-size: .92rem;
}
.section-note {
  max-width: 900px;
  margin: 28px 0 0;
  padding: 18px 20px;
  border-left: 5px solid var(--coral);
  background: var(--paper);
}
@media (max-width:900px) {
  .bloom-path {
    grid-template-columns: repeat(3,1fr);
  }
  .bloom-path article:nth-child(3) {
    border-right: 0;
  }
  .bloom-path article:nth-child(-n+3) {
    border-bottom: 1px solid var(--ink);
  }
}
@media (max-width:600px) {
  .quote-band {
    padding: 40px 0;
  }
  .bloom-path {
    grid-template-columns: 1fr 1fr;
  }
  .bloom-path article {
    min-height: 190px;
    border-bottom: 1px solid var(--ink);
  }
  .bloom-path article:nth-child(2n) {
    border-right: 0;
  }
  .bloom-path article:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
/* AJATTELU & MENETELMÄT v2 — vanha rakenne ja yhteiset komponentit */
.think-opening {
  padding: 78px 0 62px;
  background: var(--paper);
}
.think-opening-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.9fr);
  gap: 48px;
  align-items: start;
}
.think-opening h2 {
  margin: 14px 0 0;
  max-width: 11ch;
  font: 700 clamp(3.1rem,6vw,6.5rem)/.88 Fraunces,serif;
  letter-spacing: -.06em;
}
.think-opening-copy {
  font-size: 1.06rem;
}
.think-opening-copy p:first-child {
  margin-top: 0;
}
.think-toc {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 46px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.think-toc a {
  min-height: 76px;
  padding: 13px 15px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font-weight: 700;
  line-height: 1.2;
}
.think-toc a:hover {
  transform: translate(-3px,-3px);
  box-shadow: 5px 5px 0 var(--ink);
}
.think-toc span {
  display: block;
  margin-bottom: 6px;
  font: 500 .68rem DM Mono,monospace;
  letter-spacing: .08em;
}
.source-strip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  background: rgba(255,250,240,.72);
  font-size: .92rem;
}
.source-strip strong {
  min-width: max-content;
  font-family: Fraunces,serif;
}
.quote-frame {
  margin: 30px 0 0;
  padding: 28px 30px;
  border: 2px solid var(--ink);
}
.quote-frame p {
  margin: 0;
  font: 700 clamp(1.3rem,2.1vw,2.1rem)/1.12 Fraunces,serif;
  letter-spacing: -.025em;
}
.quote-frame footer {
  display: block;
  margin-top: 16px;
  font: 500 .72rem DM Mono,monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quote-frame-dark {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--sun);
}
.quote-frame-paper {
  background: var(--paper);
}
.quote-frame-yellow {
  background: #ffe58b;
}
.quote-frame-coral {
  background: #f8c4a6;
}
.quote-frame-mint {
  background: var(--mint);
}
.quote-frame-violet {
  background: #e5defb;
}
.before-after p {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(22,23,23,.2);
}
.before-after p:last-child {
  border-bottom: 0;
}
.before-after span {
  display: block;
  margin-bottom: 4px;
  font: 500 .67rem DM Mono,monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feedback-row,.pedagogy-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.feedback-row .quote-frame,.pedagogy-pair .quote-frame {
  margin-top: 24px;
}
.process-path {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.process-path article {
  min-height: 255px;
  padding: 22px 18px;
  background: var(--paper);
  border-right: 1px solid var(--ink);
}
.process-path article:nth-child(2n) {
  background: #ffe58b;
}
.process-path article:nth-child(3n) {
  background: #e5defb;
}
.process-path article:last-child {
  border-right: 0;
}
.process-path span,.bloom-path span {
  font: 500 .72rem DM Mono,monospace;
  letter-spacing: .05em;
}
.process-path h3 {
  margin: 28px 0 10px;
  font: 700 1.55rem/.98 Fraunces,serif;
}
.process-path p {
  margin: 0;
  font-size: .92rem;
}
@media (max-width:900px) {
  .think-opening-grid {
    grid-template-columns: 1fr;
  }
  .think-toc {
    grid-template-columns: repeat(2,1fr);
  }
  .process-path {
    grid-template-columns: repeat(3,1fr);
  }
  .process-path article:nth-child(3) {
    border-right: 0;
  }
  .process-path article:nth-child(-n+3) {
    border-bottom: 1px solid var(--ink);
  }
}
@media (max-width:600px) {
  .think-opening {
    padding: 56px 0 46px;
  }
  .think-toc {
    grid-template-columns: 1fr;
  }
  .feedback-row,.pedagogy-pair {
    grid-template-columns: 1fr;
  }
  .process-path {
    grid-template-columns: 1fr 1fr;
  }
  .process-path article {
    min-height: 210px;
    border-bottom: 1px solid var(--ink);
  }
  .process-path article:nth-child(2n) {
    border-right: 0;
  }
  .process-path article:last-child {
    border-bottom: 0;
  }
  .source-strip {
    display: block;
  }
  .source-strip strong {
    display: block;
    margin-bottom: 8px;
  }
}
/* AJATTELU & MENETELMÄT — pelillinen näyttämötoiminta */
.think-intro-v3 {
  padding: 80px 0 62px;
  background: var(--paper);
}
.think-intro-v3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 52px;
  align-items: start;
}
.think-intro-v3 h2 {
  max-width: 11ch;
  margin: 15px 0 0;
  font: 700 clamp(3.1rem, 6vw, 6.5rem) / .88 Fraunces, serif;
  letter-spacing: -.06em;
}
.think-intro-v3__copy {
  font-size: 1.06rem;
}
.think-intro-v3__copy p:first-child {
  margin-top: 0;
}
.think-toc-v3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.think-toc-v3 a {
  min-height: 76px;
  padding: 13px 15px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font-weight: 700;
  line-height: 1.2;
}
.think-toc-v3 a:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
}
.think-toc-v3 span {
  display: block;
  margin-bottom: 6px;
  font: 500 .68rem DM Mono, monospace;
  letter-spacing: .08em;
}
.term-bank {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff0b2;
}
.term-bank h3 {
  margin: 12px 0 18px;
  font: 700 2rem / .98 Fraunces, serif;
}
.term-bank__words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.term-bank__words span {
  padding: 6px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 500 .76rem DM Mono, monospace;
}
.game-machine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 28px 0;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.game-machine article {
  min-height: 210px;
  padding: 20px 16px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}
.game-machine article:nth-child(2n) {
  background: #f8c4a6;
}
.game-machine article:nth-child(3n) {
  background: var(--mint);
}
.game-machine article:last-child {
  border-right: 0;
}
.game-machine span {
  font: 500 .72rem DM Mono, monospace;
}
.game-machine h3 {
  margin: 28px 0 10px;
  font: 700 1.48rem / .98 Fraunces, serif;
}
.game-machine p {
  margin: 0;
  font-size: .9rem;
}
.game-explanation {
  margin-top: 24px;
}
@media (max-width: 900px) {
  .think-intro-v3__grid {
    grid-template-columns: 1fr;
  }
  .think-toc-v3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .game-machine {
    grid-template-columns: repeat(3, 1fr);
  }
  .game-machine article:nth-child(3) {
    border-right: 0;
  }
  .game-machine article:nth-child(-n + 3) {
    border-bottom: 1px solid var(--ink);
  }
}
@media (max-width: 600px) {
  .think-intro-v3 {
    padding: 56px 0 46px;
  }
  .think-toc-v3 {
    grid-template-columns: 1fr;
  }
  .game-machine {
    grid-template-columns: 1fr 1fr;
  }
  .game-machine article {
    border-bottom: 1px solid var(--ink);
  }
  .game-machine article:nth-child(2n) {
    border-right: 0;
  }
  .game-machine article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}
/* =========================================================
   PEDAGOGINEN PORTFOLIO — NYKYINEN PERUSRAKENNE
   ========================================================= */
/* Intro */
.pedagogy-intro-v5 {
  padding: 78px 0 62px;
  background: var(--paper);
}
.pedagogy-intro-v5__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.pedagogy-intro-v5 h2 {
  max-width: 12ch;
  margin: 15px 0 0;
  font: 700 clamp(3rem, 5.8vw, 6.15rem) / .88 Fraunces, serif;
  letter-spacing: -.06em;
}
.pedagogy-intro-v5__copy {
  font-size: 1.06rem;
}
.pedagogy-intro-v5__copy p:first-child {
  margin-top: 0;
}
.pedagogy-intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Pedagoginen perusta */
#perusta .pedagogy-foundation-head {
  display: block;
  max-width: 980px;
  margin: 0 0 34px;
}
#perusta .pedagogy-foundation-head h2 {
  max-width: 25ch;
  margin: 14px 0 0;
}
/* Kaksi itsenäisesti virtaavaa palstaa.
   Vasemmalla johdanto + rakenne/luottamus,
   oikealla teoria + kuva + opettaja/ohjaaja-näkökulma. */
.pedagogy-foundation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: 26px;
  align-items: start;
}
.pedagogy-foundation-column {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
#perusta .pedagogy-foundation-intro {
  margin: 0;
  padding: 31px 34px 33px;
  border: 2px solid var(--ink);
  background: rgba(255, 250, 240, .96);
  box-shadow: 7px 7px 0 rgba(22, 23, 23, .18);
}
#perusta .pedagogy-foundation-intro p {
  max-width: 68ch;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.62;
}
#perusta .pedagogy-foundation-intro p:first-child {
  font-size: 1.18rem;
  font-weight: 700;
}
#perusta .pedagogy-foundation-intro p + p {
  margin-top: 1.25em;
}
.pedagogy-foundation-theory {
  margin: 0;
  padding: 29px 30px 31px;
  border: 2px solid var(--ink);
  background: #cfeadf;
  box-shadow: 7px 7px 0 var(--ink);
}
.pedagogy-foundation-theory .label {
  display: block;
  margin-bottom: 15px;
}
.pedagogy-foundation-theory h3 {
  max-width: 15ch;
  margin: 0 0 20px;
  font: 700 clamp(2rem, 3.2vw, 3rem) / .94 Fraunces, serif;
  letter-spacing: -.045em;
}
.pedagogy-foundation-theory p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.58;
}
.pedagogy-v5-body {
  padding: 0;
  border: 2px solid var(--ink);
  background: #e5defb;
  font-size: 1rem;
  line-height: 1.58;
  box-shadow: 6px 6px 0 rgba(22, 23, 23, .16);
}
.pedagogy-foundation-point {
  padding: 29px 31px 31px;
}
.pedagogy-foundation-point + .pedagogy-foundation-point {
  border-top: 2px solid var(--ink);
  background: rgba(255, 250, 240, .32);
}
.pedagogy-v5-body h3 {
  max-width: 18ch;
  margin: 0 0 18px;
  font: 700 clamp(1.9rem, 3vw, 2.55rem) / .98 Fraunces, serif;
  letter-spacing: -.04em;
}
.pedagogy-v5-body p {
  margin: 0;
}
.pedagogy-v5-body p + p {
  margin-top: 1.15em;
}
.pedagogy-perusta-image {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 rgba(22, 23, 23, .30);
}
.pedagogy-perusta-image__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
}
.pedagogy-perusta-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pedagogy-perusta-image figcaption {
  margin: 0;
  padding: 16px 20px 18px;
  border: 0;
  background: var(--paper);
  font-family: "DM Mono", monospace;
  font-size: .77rem;
  line-height: 1.38;
  letter-spacing: .025em;
  opacity: .82;
}
.pedagogy-perusta-image .case-link {
  margin: 14px 0 0;
}
/* Opettaja/ohjaaja jatkaa oikeaa palstaa kuvan alla. */
.pedagogy-role-note {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 rgba(22, 23, 23, .24);
}
.pedagogy-role-note__lead {
  padding: 26px 27px 24px;
  border-bottom: 2px solid var(--ink);
  background: var(--mint);
}
.pedagogy-role-note__lead .label {
  display: block;
  margin-bottom: 16px;
}
.pedagogy-role-note__lead h2 {
  max-width: 12ch;
  margin: 0 0 18px;
  font: 700 clamp(2rem, 2.8vw, 2.65rem) / .94 Fraunces, serif;
  letter-spacing: -.05em;
}
.pedagogy-role-note__lead p,
.pedagogy-role-note__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
}
.pedagogy-role-note__body {
  padding: 24px 27px 27px;
}
.pedagogy-role-note__body p + p {
  margin-top: 1.15em;
}
.pedagogy-v5-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 0;
  margin-top: 24px;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.pedagogy-v5-principles article {
  height: auto;
  padding: 20px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}
.pedagogy-v5-principles article:nth-child(2) {
  background: #e5defb;
}
.pedagogy-v5-principles article:nth-child(3) {
  background: var(--mint);
}
.pedagogy-v5-principles article:last-child {
  border-right: 0;
}
.pedagogy-v5-principles span,
.play-grid span {
  font: 500 .69rem DM Mono, monospace;
  letter-spacing: .08em;
}
.pedagogy-v5-principles p {
  margin: 13px 0 0;
  font: 700 1.14rem / 1.08 Fraunces, serif;
}
@media (max-width: 900px) {
  .pedagogy-foundation-grid {
    grid-template-columns: 1fr;
  }
  .pedagogy-perusta-image {
    width: min(720px, 100%);
  }
}
@media (max-width: 600px) {
  #perusta .pedagogy-foundation-head {
    margin-bottom: 26px;
  }
  .pedagogy-foundation-grid,
  .pedagogy-foundation-column {
    gap: 20px;
  }
  #perusta .pedagogy-foundation-intro,
  .pedagogy-foundation-theory,
  .pedagogy-foundation-point,
  .pedagogy-role-note__lead,
  .pedagogy-role-note__body {
    padding: 23px 20px 24px;
  }
  #perusta .pedagogy-foundation-intro p {
    font-size: 1rem;
    line-height: 1.58;
  }
  #perusta .pedagogy-foundation-intro p:first-child {
    font-size: 1.08rem;
  }
  .pedagogy-foundation-theory h3,
  .pedagogy-role-note__lead h2 {
    max-width: none;
  }
  .pedagogy-v5-principles {
    grid-template-columns: 1fr;
  }
  .pedagogy-v5-principles article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .pedagogy-v5-principles article:last-child {
    border-bottom: 0;
  }
}
/* Pelillisyys */
.play-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 28px 0;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.play-grid article {
  min-height: 210px;
  padding: 20px 18px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}
.play-grid article:nth-child(2) {
  background: #ffe58b;
}
.play-grid article:nth-child(3) {
  background: #e5defb;
}
.play-grid article:nth-child(4) {
  background: #f8c4a6;
}
.play-grid article:last-child {
  border-right: 0;
}
.play-grid h3 {
  margin: 12px 0 10px;
  font: 700 1.45rem / .98 Fraunces, serif;
}
.play-grid p {
  margin: 0;
  font-size: .92rem;
}
/* Pitkät lukupinnat */
.longform-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
  gap: 24px;
  align-items: start;
  margin-top: 30px;
}
.play-closing-layout {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 34px;
}
.play-closing-layout .reading-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
  max-width: none;
  margin: 0;
}
.play-closing-layout .reading-panel h3 {
  grid-column: 1 / -1;
}
.play-closing-layout .reading-panel p {
  margin: 0;
}
.play-closing-layout .reading-panel p + p {
  margin: 0;
  padding-left: 42px;
  border-left: 1px solid rgba(22, 23, 23, .28);
}
.play-closing-layout .play-closing-image {
  display: block;
  min-height: 0;
  margin: 0;
}
.play-closing-layout .play-closing-image picture {
  display: block;
  width: 100%;
  min-height: 0;
}
.play-closing-layout .play-closing-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.longform-layout--right {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
}
.longform-layout--right .pedagogy-long {
  order: 2;
}
.longform-layout--right .pedagogy-aside {
  order: 1;
}
.pedagogy-long {
  max-width: 900px;
  font-size: 1.06rem;
  line-height: 1.68;
}
.pedagogy-long h3 {
  margin-top: 0;
  font: 700 2.2rem / .98 Fraunces, serif;
}
.pedagogy-long p:first-child {
  margin-top: 0;
}
.pedagogy-aside {
  margin-top: 58px;
  padding: 24px;
  border: 1px solid var(--ink);
  background: #fff0b2;
}
.pedagogy-aside h3 {
  margin: 12px 0 16px;
  font: 700 1.6rem / 1 Fraunces, serif;
}
.pedagogy-aside p {
  font-size: .84rem;
  line-height: 1.55;
}
/* Pitkän esitysprosessin viisi vaihetta */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.process-timeline li {
  position: relative;
  min-height: 300px;
  padding: 22px 12px 23px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.process-timeline li:nth-child(2) {
  transform: translateY(18px);
  background: #ffe58b;
}
.process-timeline li:nth-child(3) {
  transform: translateY(36px);
  background: #e5defb;
}
.process-timeline li:nth-child(4) {
  transform: translateY(18px);
  background: #f8c4a6;
}
.process-timeline li:nth-child(5) {
  background: var(--mint);
}
.process-timeline__number {
  display: block;
  width: 36px;
  height: 36px;
  padding-top: 9px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: 500 .92rem DM Mono, monospace;
  text-align: center;
}
.process-timeline h3 {
  margin: 50px 0 11px;
  font: 700 clamp(1rem, 1.8vw, 1.55rem) / .98 Fraunces, serif;
}
.process-timeline p {
  margin: 0;
  font-size: .92rem;
}
/* Sisällysluettelo */
.pedagogy-toc-v5 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.pedagogy-toc-v5 a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  padding: 20px 18px 18px;
  overflow: hidden;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  box-shadow: 5px 5px 0 rgba(22, 23, 23, .22);
  transition: transform .48s ease, box-shadow .48s ease;
}
.pedagogy-toc-v5 a::after {
  content: "↘";
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: "DM Mono", monospace;
  font-size: 1.35rem;
  opacity: .7;
}
.pedagogy-toc-v5 a:hover,
.pedagogy-toc-v5 a:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 15px var(--ink);
}
.pedagogy-toc-v5 span {
  display: block;
  margin-bottom: 10px;
  font: 500 .82rem / 1 "DM Mono", monospace;
  letter-spacing: .09em;
}
.pedagogy-toc-v5 a:nth-child(-n + 3) {
  grid-column: span 4;
}
.pedagogy-toc-v5 a:nth-child(n + 4) {
  grid-column: span 3;
}
.pedagogy-toc-v5 a:nth-child(1) {
  background: repeating-linear-gradient(45deg, rgba(22, 23, 23, .08) 0 1px, transparent 1px 13px),
    #fff2c2;
}
.pedagogy-toc-v5 a:nth-child(2) {
  background: radial-gradient(rgba(22, 23, 23, .15) 1px, transparent 1px),
    #ddd4f3;
  background-size: 12px 12px;
}
.pedagogy-toc-v5 a:nth-child(3) {
  background: repeating-linear-gradient(90deg, rgba(22, 23, 23, .08) 0 1px, transparent 1px 15px),
    var(--mint);
}
.pedagogy-toc-v5 a:nth-child(4) {
  background: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25% 75%, rgba(255, 255, 255, .28) 75%),
    #f6c4a8;
  background-size: 24px 24px;
}
.pedagogy-toc-v5 a:nth-child(5) {
  background: repeating-linear-gradient(0deg, rgba(22, 23, 23, .09) 0 1px, transparent 1px 17px),
    #ffe58b;
}
.pedagogy-toc-v5 a:nth-child(6) {
  background: radial-gradient(rgba(22, 23, 23, .13) 1px, transparent 1px),
    #d9eee7;
  background-size: 11px 11px;
}
.pedagogy-toc-v5 a:nth-child(7) {
  background: repeating-linear-gradient(135deg, rgba(22, 23, 23, .08) 0 1px, transparent 1px 14px),
    #f7d2b7;
}
@media (max-width: 900px) {
  .longform-layout,
  .longform-layout--right {
    grid-template-columns: 1fr;
  }
  .longform-layout--right .pedagogy-long,
  .longform-layout--right .pedagogy-aside {
    order: initial;
  }
  .pedagogy-aside {
    margin-top: 0;
  }
  .play-closing-layout {
    gap: 20px;
  }
  .pedagogy-v5-principles p {
    font-size: 1.02rem;
    line-height: 1.12;
  }
  .play-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .play-grid article:nth-child(2) {
    border-right: 0;
  }
  .play-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ink);
  }
  .pedagogy-toc-v5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pedagogy-toc-v5 a:nth-child(n) {
    grid-column: span 1;
    min-height: 40px;
  }
}
@media (max-width: 800px) {
  .play-closing-layout .reading-panel {
    grid-template-columns: 1fr;
  }
  .play-closing-layout .reading-panel p + p {
    margin-top: 1.2em;
    padding-left: 0;
    border-left: 0;
  }
  .pedagogy-toc-v5 a {
    padding: 10px 25px 10px 10px;
  }
}
@media (max-width: 750px) {
  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-timeline li:nth-child(n) {
    transform: none;
  }
  .process-timeline li:nth-child(-n + 3) {
    border-bottom: 2px solid var(--ink);
  }
  .pedagogy-long h3 {
    font: 700 1.8rem / .98 Fraunces, serif;
  }
}
@media (max-width: 670px) {
  .pedagogy-intro-v5__grid {
    grid-template-columns: 1fr;
  }
  .pedagogy-intro-image {
    width: min(420px, 100%);
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .pedagogy-intro-v5 {
    padding: 55px 0 45px;
  }
  .pedagogy-v5-principles {
    grid-template-columns: 1fr;
  }
  .pedagogy-v5-principles article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .pedagogy-v5-principles article:last-child {
    border-bottom: 0;
  }
  .play-grid {
    grid-template-columns: 1fr;
  }
  .play-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .play-grid article:last-child {
    border-bottom: 0;
  }
  .process-timeline {
    grid-template-columns: 1fr;
  }
  .process-timeline li {
    min-height: auto;
  }
}
/* PEDAGOGINEN PORTFOLIO v6 — tutkimuslainaukset ja palauteryhmien painotus */
.author-quote-band {
  padding: 42px 0;
  background: #e5defb;
}
.author-quote-band--violet {
  background: #e5defb;
}
.author-quote {
  max-width: 1040px;
  margin: 0 auto;
  padding: 34px 38px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
}
.author-quote p {
  margin: 0;
  font: 600 clamp(1.3rem,1vw,1.95rem)/1.22 Fraunces,serif;
  letter-spacing: -.025em;
  text-shadow: 1px 1px 1px var(--ink);
}
.author-quote footer {
  margin-top: 20px;
  font: 500 .72rem/1.45 DM Mono,monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px var(--ink);
}
.author-quote--ink {
  margin: 34px 0 0;
  background: var(--violet);
  color: var(--cream);
  box-shadow: 10px 10px 8px var(--sun);
}
@media (max-width:600px) {
  .author-quote {
    padding: 24px 22px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .author-quote--ink {
    box-shadow: 6px 6px 0 var(--sun);
  }
}
/* TUTKIMUKSET JA KIRJALLISUUS */
.research-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 22px;
  align-items: start;
}
.research-card {
  border: 2px solid var(--ink);
  padding: 30px;
  background: var(--paper);
}
.research-card--main {
  background: #fff0b2;
  box-shadow: 8px 8px 0 var(--ink);
}
.research-card--secondary {
  margin-top: 46px;
  background: #e5defb;
}
.research-card__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.research-card__type {
  font: 500 0.7rem/1 DM Mono, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
}
.research-card h3 {
  max-width: 18ch;
  margin: 0;
  font: 700 clamp(2rem, 3vw, 3.7rem) / 0.92 Fraunces, serif;
  letter-spacing: -0.05em;
}
.research-card h3 a {
  text-decoration: none;
  color: inherit;
}
.research-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.research-card__subtitle {
  margin: 14px 0 24px;
  font: 500 0.78rem/1.35 DM Mono, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.research-card p {
  max-width: 68ch;
}
.research-download {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  color: inherit;
  font: 500 0.78rem/1 DM Mono, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.research-download:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.research-download__icon {
  display: grid;
  width: 36px;
  height: 29px;
  place-items: center;
  border: 1px solid currentColor;
  background: var(--paper);
  font-size: 0.64rem;
  font-weight: 700;
}
.source-library__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 30px;
  margin-left: 40px;
  margin-right: 40px;
}
.source-library__grid article {
  padding: 22px 22px 24px;
  border: 1px solid var(--ink);
  background: #fff9dc;
  font-size: 14px;
}
.source-library__grid article:nth-child(2n) {
  background: #edfefc;
}
.source-library__grid article:nth-child(3n) {
  background: #fce8e8;
}
.source-library__grid article:nth-child(4n) {
  background: #fff9dc;
}
.source-library__grid article:nth-child(5n) {
  background: #edfefc;
}
.source-library__grid span {
  display: block;
  margin-bottom: 16px;
  font: 500 0.79rem/1.35 DM Mono, monospace;
  letter-spacing: 0.06em;
}
.source-library__grid ul {
  margin: 0;
  padding-left: 18px;
}
.source-library__grid li {
  margin: 0 0 9px;
  font-size: 0.75rem;
  line-height: 1.42;
}
.source-library__grid li:last-child {
  margin-bottom: 0;
}
@media (max-width: 750px) {
  .research-layout {
    grid-template-columns: 1fr;
  }
  .research-card--secondary {
    margin-top: 0;
  }
  .source-library__grid {
    grid-template-columns: 1fr;
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media (max-width: 600px) {
  .research-card {
    padding: 24px 21px 27px;
  }
  .research-card__top {
    display: block;
  }
  .research-card__type {
    display: block;
    margin-top: 8px;
  }
  .research-card--main {
    box-shadow: 6px 6px 0 var(--ink);
  }
}
/* =========================================================
   PALAUTELAINAUKSET — YHTENÄINEN GRAAFINEN TAUSTA
   ========================================================= */
.feedback-band,
.feedback-band--sun,
.feedback-band--coral,
.feedback-band--violet,
.feedback-band--ink {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 110px) 0;
  background-color: var(--coral);
  background-image: conic-gradient(
    var(--paper) 25%,
    var(--coral) 0 50%,
    var(--paper) 0 75%,
    var(--coral) 0
    );
  background-size: 60px 60px;
  background-position: 0 0;
}
/* Sisältö aina kuvioiden päälle */
.feedback-band .container {
  position: relative;
  z-index: 1;
}
/* Kortti pysyy luettavana ja erottuu kuviosta */
.feedback-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 15px var(--ink);
  padding: 34px 40px 30px;
  margin-left: 100px;
  margin-right: 100px;
}
@media (max-width: 700px) {
  .feedback-card {
    margin-left: 16px;
    margin-right: 16px;
  }
}
/* Pitkä yksittäinen palaute */
.feedback-band--solo .feedback-card--long {
  max-width: 1000px;
  padding: 42px 68px 36px;
  box-shadow: 12px 12px 0 var(--ink);
}
@media (max-width: 700px) {
  .feedback-band--solo .feedback-card--long {
    padding: 42px 18px 36px;
  }
}
.feedback-card p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.feedback-card--long p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.35vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.feedback-card footer {
  display: block;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(22, 23, 23, 0.22);
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
}
/* Mobiililla muodot eivät vie liikaa tilaa */
@media (max-width: 600px) {
  .feedback-band {
    padding: 54px 0;
  }
  .feedback-card {
    box-shadow: 6px 6px 0 var(--ink);
  }
  .feedback-card,
  .feedback-band--solo .feedback-card--long {
    padding: 26px 24px 24px;
  }
}
/* Kahden palautteen rivit rinnakkain */
.feedback-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
/* Kortit täyttävät oman palstansa */
.feedback-grid--2 .feedback-card {
  width: 100%;
  margin: 0;
}
/* Mobiilissa allekkain */
@media (max-width: 600px) {
  .feedback-grid--2 {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PELILLISYYTTÄ AVAAVA POPUP-ARTIKKELI
   ========================================================= */
.game-theory-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 34px;
  row-gap: 10px;
  align-items: end;
  max-width: 760px;
  margin: 34px auto 46px;
  padding: 22px 26px 24px;
  border: 2px solid var(--ink);
  background: var(--sun);
  box-shadow: 7px 7px 0 var(--ink);
}
.game-theory-callout .label {
  grid-column: 1 / -1;
}
.game-theory-callout h3 {
  margin: 0;
  max-width: 27ch;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.game-theory-callout p {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}
.article-open-button {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 500 0.92rem/1 "DM Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.article-open-button:hover,
.article-open-button:focus-visible {
  background: var(--paper);
  color: var(--ink);
}
.article-dialog {
  width: min(960px, calc(100% - 32px));
  max-height: min(88vh, 980px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--sun);
  overflow: visible;
}
.article-dialog::backdrop {
  background: rgba(22, 23, 23, 0.78);
  backdrop-filter: blur(3px);
}
.article-dialog__frame {
  max-height: min(88vh, 980px);
  overflow-y: auto;
}
.article-dialog__close {
  position: sticky;
  top: 16px;
  float: right;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin: 16px 16px 0 0;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.popup-article {
  padding: clamp(34px, 6vw, 78px);
}
.popup-article h2 {
  max-width: 16ch;
  margin: 16px 0 28px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.popup-article h3 {
  margin: 48px 0 14px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.popup-article p {
  max-width: 66ch;
  margin: 0 0 18px;
  font-size: 1.08rem;
  line-height: 1.65;
}
.popup-article__lead {
  max-width: 51ch !important;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.38rem, 2.3vw, 2rem) !important;
  font-weight: 600;
  line-height: 1.18 !important;
}
.popup-article__example {
  max-width: 680px;
  margin: 34px 0;
  padding: 22px 24px;
  border: 2px solid var(--ink);
  background: var(--mint);
}
.popup-article__example span {
  display: block;
  margin-bottom: 8px;
  font: 500 0.72rem/1.2 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.popup-article__example p {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
}
.popup-article__sources {
  max-width: 68ch;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(22, 23, 23, 0.28);
  line-height: 1.6;
}
.popup-article__sources li {
  margin-bottom: 8px;
}
@media (max-width: 650px) {
  .game-theory-callout {
    display: block;
    margin: 28px auto 38px;
    padding: 22px;
  }
  .game-theory-callout h3 {
    margin-top: 10px;
  }
  .game-theory-callout p {
    margin-top: 14px;
  }
  .article-open-button {
    margin-top: 18px;
  }
  .article-dialog {
    width: calc(100% - 20px);
    max-height: 92vh;
    box-shadow: 7px 7px 0 var(--sun);
  }
  .article-dialog__frame {
    max-height: 92vh;
  }
  .popup-article {
    padding: 30px 24px 42px;
  }
  .article-dialog__close {
    margin: 10px 10px 0 0;
  }
}
/* =========================================================
   TAKSONOMIA — YKSI HARJOITUS, KUUSI TAPAA AJATELLA
   ========================================================= */
.taxonomy-board {
  position: relative;
  margin: clamp(24px, 5vw, 52px) 0;
  padding: 36px 24px 42px;
  border: 2px solid var(--ink);
  background: radial-gradient(rgba(22, 23, 23, 0.08) 1px, transparent 1.2px),
    var(--paper);
  background-size: 10px 10px;
  box-shadow: 12px 12px 0 var(--ink);
  width: 85%;
  box-sizing: border-box;
}
@media (max-width: 1220px) {
  .taxonomy-board {
    width: 90%;
  }
}
@media (max-width: 1180px) {
  .taxonomy-board {
    width: 95%;
  }
}
@media (max-width: 1090px) {
  .taxonomy-board {
    width: 100%;
  }
}
.taxonomy-board__intro {
  max-width: 730px;
}
.taxonomy-board__intro h3 {
  max-width: 15ch;
  margin: 15px 0 18px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.taxonomy-board__intro p {
  max-width: 58ch;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.58;
}
.taxonomy-board__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 158px);
  align-items: end;
  width: 948px;
  height: 560px;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  list-style: none;
}
.taxonomy-board__step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 158px;
  box-sizing: border-box;
  padding: 15px 12px 14px;
  border: 2px solid var(--ink);
  border-right: 0;
}
.taxonomy-board__step:last-child {
  border-right: 2px solid var(--ink);
}
.taxonomy-board__step--1 {
  min-height: 450px;
  background: var(--paper);
}
.taxonomy-board__step--2 {
  min-height: 480px;
  background: #ffe88f;
}
.taxonomy-board__step--3 {
  min-height: 510px;
  background: var(--mint);
}
.taxonomy-board__step--4 {
  min-height: 540px;
  background: #ddd4f3;
}
.taxonomy-board__step--5 {
  min-height: 570px;
  background: #f6c4a8;
}
.taxonomy-board__step--6 {
  min-height: 600px;
  background: #fff0ad;
}
.taxonomy-board__number,
.taxonomy-board__action {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.taxonomy-board__action {
  margin-top: 8px;
}
.taxonomy-board__step h3 {
  margin: 18px 0 4px;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.6rem;
  overflow-wrap: normal;
  line-height: 0.95;
  word-break: normal;
  hyphens: none;
  letter-spacing: -0.04em;
}
.taxonomy-board__icon {
  display: flex;
  align-items: center;
  width: 100%;
  height: 78px;
  margin: 0px 0 10px;
}
.taxonomy-board__icon img {
  display: block;
  width: min(76px, 100%);
  height: 70px;
  object-fit: contain;
  object-position: left center;
}
.taxonomy-board__question {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}
.taxonomy-board__step > p:not(.taxonomy-board__question):not(.taxonomy-board__example) {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.48;
}
.taxonomy-board__example {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 0.79rem;
  font-style: italic;
  line-height: 1.45;
}
.taxonomy-board__example span {
  display: block;
  margin-bottom: 7px;
  font-family: "DM Mono", monospace;
  font-size: 0.69rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Katkoviivanuolet portaiden yläpuolelle */
.taxonomy-board__diagram {
  position: relative;
  width: 948px;
  height: 600px;
  margin: 0;
}
.taxonomy-board__arrows {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform: translateY(-120px);
}
.taxonomy-board__arrows svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.taxonomy-board__arrow-lines path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
  opacity: 0.82;
  marker-end: url("#taxonomy-arrowhead");
}
/* =========================================================
   TAKSONOMIA — VAAKASUUNTAINEN VIERITYS KAPEILLA NÄYTÖILLÄ
   ========================================================= */
.taxonomy-board__scroll-hint {
  display: none;
}
/* Vieritys vain silloin, kun 1200 px diagrammi ei mahdu näkyviin */
@media (max-width: 1220px) {
  .taxonomy-board__diagram-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* Antaa -120px nostetuille nuolille näkyvän tilan */
    padding: 120px 0 24px;
    /* Poistaa paddingin aiheuttaman tyhjän välin otsikon jälkeen */
    margin-top: -120px;
    position: relative;
    z-index: 2;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
}
@media (max-width: 1020px) {
  .taxonomy-board__scroll-hint {
    display: block;
    margin: 0 0 10px;
    font: 500 0.75rem/1.3 "DM Mono", monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
.term-bank .article-open-button {
  display: inline-flex;
  width: fit-content;
  margin-top: 22px;
}
.toiminnallinen-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 28px;
  align-items: start;
}
.toiminnallinen-opening__intro {
  padding: 8px 0 0;
}
.toiminnallinen-opening__intro h2 {
  max-width: 12ch;
  margin: 16px 0 24px;
  font: 700 clamp(2.7rem, 5vw, 5.1rem) / 0.9 Fraunces, serif;
  letter-spacing: -0.055em;
}
.toiminnallinen-opening__intro p {
  max-width: 62ch;
  margin: 0 0 18px;
  font-size: 1.04rem;
  line-height: 1.58;
}
.toiminnallinen-opening__thesis {
  align-self: start;
  margin-top: 48px;
}
.objective-article-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label"
    "title"
    "description"
    "hierarchy"
    "button";
  width: 100%;
  min-width: 0;
  padding: 28px 30px 32px;
  border: 2px solid var(--ink);
  background: var(--sun);
  box-shadow: 8px 8px 0 var(--ink);
}
/* Nykyisessä HTML:ssä painike on copy-divin sisällä.
   display:contents antaa sen ja muut copy-elementit osallistua
   suoraan paneelin pystysuuntaiseen grid-järjestykseen. */
.objective-article-callout__copy {
  display: contents;
}
.objective-article-callout__copy > .label {
  grid-area: label;
}
.objective-article-callout h3 {
  grid-area: title;
  max-width: 11ch;
  margin: 10px 0 15px;
  font: 700 clamp(2.25rem, 3.2vw, 3rem) / .93 Fraunces, serif;
  letter-spacing: -.05em;
}
.objective-article-callout__copy > p {
  grid-area: description;
  max-width: 38ch;
  margin: 0;
  font-size: .96rem;
  line-height: 1.5;
}
.objective-article-callout__hierarchy {
  grid-area: hierarchy;
}
.objective-article-callout .article-open-button {
  grid-area: button;
  grid-column: 1;
  grid-row: auto;
  display: inline-flex;
  width: fit-content;
  justify-self: start;
  margin-top: 22px;
}
.objective-article-callout__words {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 7px;
}
.objective-article-callout__words span {
  padding: 5px 7px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .toiminnallinen-opening,
  .objective-article-callout {
    grid-template-columns: 1fr;
  }
  .toiminnallinen-opening__thesis {
    margin-top: 0;
  }
}
.process-image {
  margin: 0;
  margin-top: 80px;
  min-height: 170px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.process-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.process-image figcaption {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  font: 500 0.82rem/1.35 "DM Mono", monospace;
  letter-spacing: 0.03em;
}
.process-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(38px, 5vw, 72px);
  align-items: start;
  margin-top: 28px;
}
.process-intro-split__copy {
  font-size: 1.05rem;
  line-height: 1.65;
}
.process-intro-split__copy p {
  margin: 0;
}
@media (max-width: 900px) {
  .process-intro-split {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   OHJAUKSET: SUODATUS, KUVAT JA POPUP
   ========================================================= */
.project-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 30px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.project-filter__label {
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.project-filter__button {
  padding: 8px 9px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font: 500 .67rem/1 "DM Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.project-filter__button.is-active {
  background: var(--ink);
  color: var(--cream);
}
.project-grid--directions .project-card {
  cursor: pointer;
}
.project-grid--directions .project-card h3 {
  max-width: 100%;
  font-size: clamp(1.8rem, 2.3vw, 2.3rem);
  overflow-wrap: anywhere;
  hyphens: manual;
}
.project-card__image {
  width: calc(100% + 48px);
  height: 178px;
  margin: -24px -24px 20px;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
}
.project-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-card__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
}
.project-card__keywords span,
.project-dialog__keywords span {
  padding: 5px 6px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, .72);
  font: 500 .62rem/1 "DM Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.project-grid--directions .project-card.is-hidden {
  display: none;
}
.project-grid__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.project-show-more,
.project-show-less {
  padding: 14px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: 500 .78rem/1 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.project-show-less {
  background: var(--paper);
  color: var(--ink);
}
/* Popup */
.project-dialog {
  width: min(960px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.project-dialog::backdrop {
  background: rgba(22, 23, 23, .7);
}
.project-dialog__frame {
  position: relative;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
}
.project-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  font: 400 2rem/.8 Arial, sans-serif;
}
.project-dialog__image {
  margin: 0;
  height: min(44vw, 420px);
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
}
.project-dialog__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-dialog__content {
  padding: clamp(26px, 5vw, 56px);
}
.project-dialog__tag {
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--sun);
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-dialog h2 {
  max-width: 17ch;
  margin: 22px 0 16px;
  font: 700 clamp(2.5rem, 5vw, 5.2rem)/.9 Fraunces, serif;
  letter-spacing: -.055em;
}
.project-dialog__organisation {
  margin: 0 0 20px;
  font: 500 .78rem/1.4 "DM Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.project-dialog__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 24px;
}
.project-dialog__summary {
  max-width: 64ch;
  margin: 0;
  font: 600 clamp(1.15rem, 2vw, 1.5rem)/1.35 Fraunces, serif;
}
.project-dialog__details {
  max-width: 68ch;
  margin: 22px 0 0;
  font-size: 1rem;
  line-height: 1.65;
}
@media (max-width: 700px) {
  .project-filter {
    display: block;
  }
  .project-filter__buttons {
    margin-top: 13px;
  }
  .project-card__image {
    height: 155px;
  }
  .project-dialog {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    box-shadow: none;
  }
  .project-dialog__frame {
    max-height: 100vh;
  }
  .project-dialog__image {
    height: 290px;
  }
}
.project-direction--yellow {
  background-color: #ffcf5c;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.26) 0 13px,
    transparent 13px 26px
    );
}
.project-direction--violet {
  background-color: #e5defb;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.08) 0 1px,
    transparent 1px 15px
    );
}
.project-dialog__gallery {
  margin-top: 34px;
}
.project-dialog__gallery-columns {
  display: grid;
  gap: 12px;
  align-items: start;
}
.project-dialog__gallery-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-dialog__gallery-item {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.project-dialog__gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .project-dialog__gallery-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-dialog__gallery-column:nth-child(3) {
    display: none;
  }
}
@media (max-width: 600px) {
  .project-dialog__gallery-columns {
    grid-template-columns: 1fr;
  }
  .project-dialog__gallery-column:nth-child(2),
  .project-dialog__gallery-column:nth-child(3) {
    display: none;
  }
}
.project-dialog__gallery-item--poster img {
  object-fit: contain;
  background: var(--paper);
}
@media (max-width: 620px) {
  .project-dialog__gallery {
    grid-template-columns: 1fr;
  }
  .project-dialog__gallery-item--landscape,
  .project-dialog__gallery-item--poster {
    grid-column: span 1;
  }
  .project-dialog__gallery-item--poster {
    width: min(280px, 100%);
    justify-self: center;
  }
}
.project-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 22px;
}
.project-dialog__text {
  min-width: 0;
}
.project-dialog__text .project-dialog__details {
  margin-top: 0;
}
.project-dialog__poster {
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}
.project-dialog__poster img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .project-dialog__body {
    grid-template-columns: 1fr;
  }
  .project-dialog__poster {
    width: min(320px, 100%);
    justify-self: center;
    order: -1;
  }
}
/* =========================================================
   NÄYTELMÄTEKSTIT: KORTIT, SUODATUS JA POPUP
   ========================================================= */
.text-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 30px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.text-filter__label {
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.text-filter__button {
  padding: 8px 9px;
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font: 500 .67rem/1 "DM Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.text-filter__button.is-active {
  background: var(--ink);
  color: var(--cream);
}
@media (min-width: 761px) {
  .text-grid .project-card h3,
  .pedagogy-project-grid .project-card h3 {
    font-size: clamp(1.8rem, 2.8vw, 2.3rem);
  }
}
.text-grid .project-card {
  cursor: pointer;
}
.text-grid .project-card[hidden] {
  display: none;
}
.text-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
}
.text-card__meta span {
  padding: 5px 6px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, .72);
  font: 500 .64rem/1 "DM Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Popup */
.text-dialog {
  width: min(900px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.text-dialog::backdrop {
  background: rgba(22, 23, 23, .7);
}
.text-dialog__frame {
  position: relative;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
}
.text-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 400 2rem/.8 Arial, sans-serif;
  cursor: pointer;
}
.text-dialog__content {
  padding: clamp(28px, 6vw, 64px);
}
.text-dialog__type {
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--sun);
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-dialog h2 {
  max-width: 16ch;
  margin: 22px 0 22px;
  font: 700 clamp(2.6rem, 5.5vw, 5.5rem)/.9 Fraunces, serif;
  letter-spacing: -.055em;
}
.text-dialog__meta,
.text-dialog__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.text-dialog__meta {
  margin-bottom: 12px;
}
.text-dialog__meta span,
.text-dialog__keywords span {
  padding: 6px 7px;
  border: 1px solid var(--ink);
  background: var(--cream);
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.text-dialog__description {
  max-width: 68ch;
  margin-top: 30px;
  font-size: 1.04rem;
  line-height: 1.65;
}
.text-dialog__description p:first-child {
  margin-top: 0;
}
.text-dialog__excerpt {
  max-width: 720px;
  margin: 38px 0 0;
  padding: 26px 28px;
  border: 2px solid var(--ink);
  background: #e5defb;
}
.text-dialog__excerpt-label {
  display: block;
  margin-bottom: 18px;
  font: 500 .72rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-dialog__excerpt p {
  margin: 0 0 1.05rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}
.text-dialog__excerpt p:last-child {
  margin-bottom: 0;
}
.text-dialog__link {
  display: inline-flex;
  margin-top: 30px;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: 500 .76rem/1 "DM Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.text-dialog__link:hover,
.text-dialog__link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--sun);
}
@media (max-width: 700px) {
  .text-filter {
    display: block;
  }
  .text-filter__buttons {
    margin-top: 13px;
  }
  .text-dialog {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    box-shadow: none;
  }
  .text-dialog__frame {
    max-height: 100vh;
  }
  .text-dialog__content {
    padding: 78px 24px 42px;
  }
}
/* =========================================================
   NÄYTELMÄTEKSTIT: NÄYTÄ KAIKKI + VAIHTUVAT TAUSTAT
   ========================================================= */
.text-grid .project-card {
  cursor: pointer;
  border: 2px solid var(--ink);
}
.text-grid .project-card[hidden] {
  display: none;
}
/* Vaalea kortti */
.text-grid .project-text--cream {
  background: var(--cream);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 14px
    );
  color: var(--ink);
}
/* Tumma kortti */
.text-grid .project-text--ink {
  background: #18191a;
  background-image: radial-gradient(rgba(255, 246, 223, 0.16) 1px, transparent 1px);
  background-size: 11px 11px;
  color: var(--cream);
}
.text-grid .project-text--ink .tag,
.text-grid .project-text--ink .text-card__meta span,
.text-grid .project-text--ink .project-card__keywords span {
  border-color: var(--cream);
  background: rgba(255, 246, 223, 0.08);
  color: var(--cream);
}
.text-grid .project-text--ink .project-year {
  color: rgba(255, 246, 223, 0.74);
}
.text-grid__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.text-show-more,
.text-show-less {
  padding: 14px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: 500 0.78rem/1 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.text-show-less {
  background: var(--paper);
  color: var(--ink);
}
.text-show-more:hover,
.text-show-less:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--sun);
}
/* =========================================================
   PEDAGOGISET KOKONAISUUDET
   ========================================================= */
.pedagogy-project-grid .project-card {
  cursor: pointer;
  border: 2px solid var(--ink);
}
.pedagogy-project-grid .project-card[hidden] {
  display: none;
}
.pedagogy-project-grid .project-ped--cream {
  background: repeating-linear-gradient(
    0deg,
    rgba(22, 23, 23, 0.07) 0 1px,
    transparent 1px 18px
    ),
    #f3e6b5;
  color: var(--ink);
}
.pedagogy-project-grid .project-ped--ink {
  background: radial-gradient(
    rgba(255, 246, 223, 0.13) 1px,
    transparent 1px
    ),
    #234d58;
  background-size: 12px 12px;
  color: #fff8e7;
}
.pedagogy-project-grid .project-ped--ink .project-year {
  color: rgba(255, 248, 231, 0.78);
}
.pedagogy-project-grid .project-ped--ink h3 {
  color: #ffe58b;
}
.pedagogy-project-grid .project-ped--ink::after {
  border-color: rgba(255, 229, 139, 0.22);
}
.pedagogy-project-grid__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.pedagogy-project-show-more,
.pedagogy-project-show-less {
  padding: 14px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: 500 0.78rem/1 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pedagogy-project-show-less {
  background: var(--paper);
  color: var(--ink);
}
.pedagogy-project-show-more:hover,
.pedagogy-project-show-less:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--sun);
}
/* Popup */
.pedagogy-project-dialog {
  width: min(860px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.pedagogy-project-dialog::backdrop {
  background: rgba(22, 23, 23, 0.72);
}
.pedagogy-project-dialog__frame {
  position: relative;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
}
.pedagogy-project-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font: 400 2rem/.8 Arial, sans-serif;
  cursor: pointer;
}
.pedagogy-project-dialog__content {
  padding: clamp(34px, 6vw, 64px);
}
.pedagogy-project-dialog__label {
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--sun);
  font: 500 0.72rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pedagogy-project-dialog h2 {
  max-width: 16ch;
  margin: 22px 0 16px;
  font: 700 clamp(2.6rem, 5vw, 5.2rem)/.9 Fraunces, serif;
  letter-spacing: -0.055em;
}
.pedagogy-project-dialog__year {
  margin: 0 0 28px;
  font: 500 0.78rem/1.4 "DM Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pedagogy-project-dialog__summary {
  max-width: 60ch;
  margin: 0;
  font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.35 Fraunces, serif;
}
.pedagogy-project-dialog__details {
  max-width: 68ch;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  font-size: 1.04rem;
  line-height: 1.65;
}
.pedagogy-project-dialog__details p:first-child {
  margin-top: 0;
}
@media (max-width: 700px) {
  .pedagogy-project-dialog {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    box-shadow: none;
  }
  .pedagogy-project-dialog__frame {
    max-height: 100vh;
  }
  .pedagogy-project-dialog__content {
    padding: 78px 24px 42px;
  }
}
/* =========================================================
   PEDAGOGISET KOKONAISUUDET: TAUSTA
   ========================================================= */
.pedagogy-projects-section {
  position: relative;
  overflow: hidden;
  background-color: #8fb585;
  background-image: linear-gradient(
    135deg,
    rgba(20, 88, 100, 0.2) 0,
    rgba(20, 88, 100, 0.2) 1px,
    transparent 1px,
    transparent 18px
    ),
    linear-gradient(
    45deg,
    rgba(255, 246, 223, 0.2) 0,
    rgba(255, 246, 223, 0.2) 1px,
    transparent 1px,
    transparent 18px
    );
  background-size: 18px 18px;
}
.pedagogy-projects-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 12% 18%,
    rgba(255, 229, 139, 0.34),
    transparent 30%
    ),
    radial-gradient(
    circle at 88% 76%,
    rgba(20, 88, 100, 0.28),
    transparent 38%
    );
}
.pedagogy-projects-section > .container {
  position: relative;
  z-index: 1;
}
.pedagogy-projects-section .content-intro h2 {
  color: #0d2b32;
}
.pedagogy-projects-section .content-intro p {
  color: rgba(13, 40, 46, 0.92);
}
/* =========================================================
   TYÖKALUT, TUTKIMUKSET JA KONSEPTIT
   ========================================================= */
.lab-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 10% 12%,
    rgba(255, 207, 92, 0.52),
    transparent 28%
    ),
    radial-gradient(
    circle at 86% 18%,
    rgba(229, 222, 251, 0.62),
    transparent 32%
    ),
    radial-gradient(
    circle at 78% 82%,
    rgba(255, 122, 89, 0.46),
    transparent 34%
    ),
    radial-gradient(
    circle at 22% 86%,
    rgba(185, 212, 207, 0.68),
    transparent 36%
    ),
    linear-gradient(
    135deg,
    #f6edcf 0%,
    #d7e7d9 34%,
    #b9d4cf 58%,
    #d9d0ef 100%
    );
  color: var(--ink);
}
.lab-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(22, 23, 23, 0.055) 1px,
    transparent 1.4px
    );
  background-size: 13px 13px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.lab-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0 18%,
    rgba(255, 246, 223, 0.34) 18% 19%,
    transparent 19% 100%
    ),
    linear-gradient(
    32deg,
    transparent 0 64%,
    rgba(20, 88, 100, 0.12) 64% 65%,
    transparent 65% 100%
    );
  opacity: 0.75;
}
.lab-section > .container {
  position: relative;
  z-index: 1;
}
.lab-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.75fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 42px;
}
.lab-head .label {
  grid-column: 1 / -1;
  width: fit-content;
  border-color: rgba(22, 23, 23, 0.72);
  color: var(--ink);
  background: rgba(255, 246, 223, 0.72);
}
.lab-head h2 {
  max-width: 12ch;
  margin: 0;
  color: #161717;
  font: 700 clamp(3rem, 6.4vw, 6.5rem) / 0.96 Fraunces, serif;
  letter-spacing: -0.065em;
}
.lab-head p {
  max-width: 44ch;
  margin: 0;
  color: rgba(22, 23, 23, 0.82);
  font-size: 1.12rem;
  line-height: 1.5;
}
.lab-note {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 760px;
  margin-top: -18px;
  transform: rotate(-1deg);
  padding: 13px 18px;
  border: 2px solid var(--ink);
  background: #fff6df;
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  font: 500 0.78rem/1.35 "DM Mono", monospace;
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.lab-card {
  position: relative;
  display: flex;
  min-height: 330px;
  flex-direction: column;
  padding: 26px;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}
.lab-card:hover,
.lab-card:focus-visible {
  transform: translate(-4px, -5px);
  box-shadow: 13px 13px 0 var(--ink);
  outline: none;
  filter: saturate(1.05);
}
.lab-card__type {
  display: inline-block;
  width: fit-content;
  margin-bottom: 20px;
  padding: 7px 9px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.16);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lab-card h3 {
  max-width: 11ch;
  margin: 0 0 18px;
  font: 700 clamp(2.2rem, 3.4vw, 2.65rem)/0.9 Fraunces, serif;
  letter-spacing: -0.055em;
}
.lab-card p {
  max-width: 40ch;
  margin: 0 0 36px;
  font-size: 1rem;
  line-height: 1.45;
}
.lab-card__cta {
  margin-top: auto;
  font: 700 0.72rem/1.2 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Hillitysti erilaiset muodot */
.lab-card[hidden],
.lab-grid__actions[hidden] {
  display: none;
}
.lab-card--luonnostamo {
  border-radius: 16px 36px 16px 36px;
  background: #d99176;
}
.lab-card--replat {
  border-radius: 36px 16px 36px 16px;
  background: linear-gradient(135deg, rgba(255, 246, 223, 0.1), transparent 48%),
    #2d2868;
  color: var(--cream);
}
.lab-card--action {
  border-radius: 16px 48px 16px 28px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(22, 23, 23, 0.08) 0 1px,
    transparent 1px 13px
    ),
    #e9c46a;
}
.lab-card--yamk {
  border-radius: 16px 70px 16px 16px;
  background: #e5defb;
}
.lab-card--amk {
  border-radius: 16px 16px 70px 16px;
  background: #b9d4cf;
}
.lab-card--concept {
  border-radius: 42px 16px 16px 16px;
  background: #dce6bf;
}
.lab-card--visual {
  border-radius: 16px 16px 42px 42px;
  background: #fff6df;
}
/* Tumman kortin pienet säädöt */
.lab-card--replat .lab-card__type {
  border-color: rgba(255, 246, 223, 0.78);
  background: rgba(255, 246, 223, 0.08);
}
.lab-card--replat .lab-card__cta {
  color: #dce6bf;
}
/* Kortteihin pieni arkistomainen kerros */
.lab-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(22, 23, 23, 0.16);
  border-radius: inherit;
}
.lab-card--replat::after {
  border-color: rgba(255, 246, 223, 0.18);
}
@media (max-width: 980px) {
  .lab-head {
    grid-template-columns: 1fr;
  }
  .lab-head p {
    margin-top: -18px;
  }
  .lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .lab-grid {
    grid-template-columns: 1fr;
  }
  .lab-card {
    min-height: 280px;
  }
}
/* Lab-dialogit */
.lab-dialog {
  width: min(920px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.lab-dialog::backdrop {
  background: rgba(10, 10, 20, 0.78);
}
.lab-dialog__frame {
  position: relative;
  max-height: calc(100vh - 30px);
  overflow-y: auto;
}
.lab-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--ink);
  background: #d6ff4e;
  color: var(--ink);
  font: 400 2rem/.8 Arial, sans-serif;
  cursor: pointer;
}
.lab-dialog__content {
  padding: clamp(36px, 6vw, 70px);
}
.lab-dialog__label {
  display: inline-block;
  width: fit-content;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: #ffcf5c;
  font: 500 0.72rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lab-dialog h2 {
  max-width: 12ch;
  margin: 22px 0 20px;
  font: 700 clamp(3rem, 6vw, 6.4rem)/0.86 Fraunces, serif;
  letter-spacing: -0.065em;
}
.lab-dialog__lead {
  max-width: 62ch;
  margin: 0 0 28px;
  font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.35 Fraunces, serif;
}
.luonnostamo-title {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  margin: 20px 0 24px;
}
.luonnostamo-title__logo {
  flex: 0 0 auto;
  width: clamp(36px, 8vw, 88px);
  height: auto;
}
.luonnostamo-title h2 {
  margin: 0;
  min-width: 0;
}
@media (max-width: 600px) {
  .luonnostamo-dialog-content h2 {
    font-size: clamp(1.65rem, 8vw, 3rem);
  }
}
.lab-dialog p {
  max-width: 72ch;
  line-height: 1.65;
}
.luonnostamo-dialog-content .luonnostamo-tagline {
  margin: 0 0 22px;
  font: 600 .9rem/1.5 'DM Mono', monospace;
}
.luonnostamo-dialog-content .lab-dialog__lead {
  line-height: 1.5;
}
.luonnostamo-dialog-content h4 {
  max-width: 65ch;
  margin: 26px 0 10px;
  font: 700 1.1rem/1.45 Manrope, Arial, sans-serif;
}
.luonnostamo-dialog-content h3 {
  line-height: 1.08;
  hyphens: manual;
  overflow-wrap: anywhere;
}
.luonnostamo-dialog-content .replat-dialog-section {
  padding-top: 28px;
  border-top: 1px solid rgb(22 23 23 / .2);
}
.luonnostamo-release-note {
  max-width: 38rem;
  margin: 28px 4px 38px;
  padding: 22px 24px;
  background: #f5df88;
  color: var(--ink);
  box-shadow: 4px 6px 0 rgb(22 23 23 / .16);
  transform: rotate(-1.2deg);
}
.luonnostamo-release-note strong {
  display: block;
  font: 600 .8rem/1.5 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.luonnostamo-dialog-content .luonnostamo-release-note p {
  margin: 12px 0 14px;
  font: 400 1rem/1.5 Manrope, Arial, sans-serif;
}
.luonnostamo-release-note a {
  font: 700 .95rem/1.5 Manrope, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.luonnostamo-release-note a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.luonnostamo-image-slot {
  margin: 32px 0;
}
.luonnostamo-image-slot__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: clamp(160px, 24vw, 280px);
  padding: 28px;
  border: 1px dashed rgb(22 23 23 / .35);
  background: #e4e9dc;
  text-align: center;
}
.luonnostamo-image-slot__placeholder span {
  font: 500 .75rem/1.5 'DM Mono', monospace;
  letter-spacing: .08em;
}
.luonnostamo-image-slot__placeholder strong {
  font: 600 1.1rem/1.4 Manrope, Arial, sans-serif;
}
.luonnostamo-image-slot figcaption {
  margin-top: 10px;
  font: 400 .9rem/1.5 Manrope, Arial, sans-serif;
}
.luonnostamo-image-slot [hidden] {
  display: none;
}
.luonnostamo-image-slot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(22 23 23 / .2);
}
/* =========================================================
   REPLAT HALTUUN -ESITTELY
   ========================================================= */
.replat-dialog-content {
  --replat-violet: #2d2868;
  --replat-lime: #dce6bf;
  --replat-paper: #fff6df;
}
.replat-dialog-content h3 {
  margin: 0 0 14px;
  font: 700 clamp(1.8rem, 3vw, 3rem)/0.95 Fraunces, serif;
  letter-spacing: -0.04em;
}
.replat-dialog-section {
  margin: 36px 0;
}
.replat-dialog-section p {
  margin: 0;
}
.replat-dialog-section p + p {
  margin-top: 16px;
}
.replat-dialog-section--origin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 28px;
  align-items: start;
}
.replat-dialog-quote {
  transform: rotate(1.5deg);
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--replat-lime);
  box-shadow: 7px 7px 0 var(--ink);
}
.replat-dialog-quote p {
  margin: 0;
  font: 700 clamp(1.55rem, 2.5vw, 2.3rem)/1 Fraunces, serif;
  letter-spacing: -0.04em;
}
.replat-dialog-quote p + p {
  margin-top: 12px;
}
.replat-dialog-quote span {
  display: block;
  margin-top: 18px;
  font: 500 0.72rem/1.35 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.replat-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 38px 0;
}
.replat-feature {
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--replat-paper);
  box-shadow: 6px 6px 0 var(--ink);
}
.replat-feature:nth-child(even) {
  background: #e5defb;
}
.replat-feature span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.replat-feature h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
}
.replat-feature p {
  margin: 0;
  line-height: 1.55;
}
.replat-dialog-section--tracking {
  padding: 28px;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, rgba(220, 230, 191, 0.45), transparent 48%),
    #b9d4cf;
  box-shadow: 7px 7px 0 var(--ink);
}
.replat-dialog-image {
  margin: 32px 0;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}
.replat-dialog-image img {
  display: block;
  width: 100%;
  height: auto;
}
.replat-dialog-image figcaption {
  padding: 10px 12px;
  background: var(--replat-paper);
  color: var(--ink);
  font: 500 0.72rem/1.35 "DM Mono", monospace;
}
.replat-dialog-image--hero {
  margin-top: 34px;
}
.replat-dialog-image--wide {
  margin-top: 26px;
}
.replat-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 38px 0;
}
.replat-image-pair .replat-dialog-image {
  margin: 0;
}
.replat-dialog-closing {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.45 Fraunces, serif;
}
.replat-dialog-section--versions {
  padding: 28px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 14px
    ),
    #e5defb;
  box-shadow: 7px 7px 0 var(--ink);
}
@media (max-width: 760px) {
  .replat-dialog-section--origin,
  .replat-feature-grid,
  .replat-image-pair {
    grid-template-columns: 1fr;
  }
  .replat-dialog-quote {
    transform: none;
  }
}
@media (max-width: 900px) {
  .lab-head {
    grid-template-columns: 1fr;
  }
  .lab-grid {
    grid-template-columns: 1fr;
  }
  .replat-showcase {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .lab-dialog {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    box-shadow: none;
  }
  .lab-dialog__frame {
    max-height: 100vh;
  }
  .lab-dialog__content {
    padding: 78px 24px 42px;
  }
}
/* =========================================================
   ESITTELY: KEHITTÄJÄPROFIILI
   ========================================================= */
.developer-profile-section {
  background: radial-gradient(circle at 12% 12%, rgba(255, 207, 92, 0.34), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(185, 212, 207, 0.48), transparent 36%),
    linear-gradient(135deg, #fff6df, #efe7c8 48%, #dce6bf);
}
.developer-profile {
  display: grid;
  gap: 34px;
  min-width: 0;
}
.developer-profile__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: 34px;
  align-items: end;
  min-width: 0;
}
.developer-profile__intro .label {
  grid-column: 1 / -1;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.developer-profile__intro h2 {
  max-width: 15ch;
  margin: 0;
  font: 700 clamp(2.8rem, 5.6vw, 5.5rem)/0.88 Fraunces, serif;
  letter-spacing: -0.065em;
}
.developer-profile__lead {
  margin: 0;
  font: 600 clamp(1.25rem, 2vw, 1.45rem)/1.35 Fraunces, serif;
}
.developer-profile__text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  font-size: 1.02rem;
  line-height: 1.65;
}
.developer-profile__text p {
  margin: 0;
}
.developer-profile__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.developer-profile-card {
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
}
.developer-profile-card:nth-child(even) {
  background: #b9d4cf;
}
.developer-profile-card span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.developer-profile-card h3 {
  margin: 0 0 14px;
  font: 700 clamp(1.55rem, 2vw, 1.9rem)/0.95 Fraunces, serif;
  letter-spacing: -0.04em;
}
.developer-profile-card p {
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .developer-profile__intro,
  .developer-profile__text,
  .developer-profile__cards {
    grid-template-columns: 1fr;
  }
  .developer-profile__intro h2 {
    max-width: 13ch;
  }
}
/* =========================================================
   FESTARIPASSI-DIALOGI
   ========================================================= */
.festaripassi-dialog-content {
  --festari-paper: #fff6df;
  --festari-mint: #dce6bf;
  --festari-green: #b9d4cf;
  --festari-lilac: #e5defb;
  --festari-coral: #ff7a59;
  --festari-sun: #ffcf5c;
}
.festaripassi-dialog-content h3 {
  margin: 0 0 14px;
  font: 700 clamp(1.8rem, 3vw, 3rem)/0.95 Fraunces, serif;
  letter-spacing: -0.04em;
}
.festaripassi-section {
  margin: 38px 0;
}
.festaripassi-section p {
  margin: 0;
}
.festaripassi-section p + p {
  margin-top: 16px;
}
.festaripassi-section--intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.55fr);
  gap: 28px;
  align-items: start;
}
.festaripassi-note {
  transform: rotate(1.4deg);
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--festari-sun);
  box-shadow: 7px 7px 0 var(--ink);
}
.festaripassi-note span {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.festaripassi-note p {
  margin: 0;
  font: 700 clamp(1.25rem, 2vw, 1.8rem)/1.05 Fraunces, serif;
  letter-spacing: -0.04em;
}
.festaripassi-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 40px 0;
}
.festaripassi-feature {
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--festari-paper);
  box-shadow: 6px 6px 0 var(--ink);
}
.festaripassi-feature:nth-child(2) {
  background: var(--festari-mint);
}
.festaripassi-feature:nth-child(3) {
  background: var(--festari-lilac);
}
.festaripassi-feature:nth-child(4) {
  background: var(--festari-green);
}
.festaripassi-feature span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.festaripassi-feature h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
}
.festaripassi-feature p {
  margin: 0;
  line-height: 1.55;
}
.festaripassi-section--pedagogy {
  padding: 28px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 14px
    ),
    var(--festari-mint);
  box-shadow: 7px 7px 0 var(--ink);
}
.festaripassi-image {
  margin: 34px 0;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}
.festaripassi-image img {
  display: block;
  width: 100%;
  height: auto;
}
.festaripassi-image figcaption {
  padding: 10px 12px;
  background: var(--festari-paper);
  color: var(--ink);
  font: 500 0.72rem/1.35 "DM Mono", monospace;
}
.festaripassi-image--hero {
  margin-top: 34px;
}
.festaripassi-image--wide {
  margin-top: 28px;
  max-width: 500px;
}
.festaripassi-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 40px 0;
  align-items: start;
}
.festaripassi-image-pair .festaripassi-image {
  margin: 0;
  align-self: start;
}
.festaripassi-closing {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.45 Fraunces, serif;
}
@media (max-width: 760px) {
  .festaripassi-section--intro,
  .festaripassi-feature-grid,
  .festaripassi-image-pair {
    grid-template-columns: 1fr;
  }
  .festaripassi-note {
    transform: none;
  }
}
/* =========================================================
   PROJEKTISIVUN SISÄLLYSLUETTELO
   ========================================================= */
.project-toc {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vw, 46px) 0;
  background: radial-gradient(circle at 12% 16%, rgba(255, 207, 92, 0.36), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(229, 222, 251, 0.42), transparent 34%),
    linear-gradient(135deg, #fff6df, #dce6bf 58%, #b9d4cf);
  border-bottom: 2px solid var(--ink);
}
.project-toc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(22, 23, 23, 0.045) 1px, transparent 1.4px);
  background-size: 13px 13px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.project-toc > .container {
  position: relative;
  z-index: 1;
}
.project-toc__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.project-toc__head .label {
  width: fit-content;
}
.project-toc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.project-toc-card {
  position: relative;
  display: grid;
  min-height: 112px;
  place-items: center;
  padding: 18px 20px;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
}
.project-toc-card:hover,
.project-toc-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ink);
  outline: none;
  filter: saturate(1.08);
}
.project-toc-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(22, 23, 23, 0.14);
  border-radius: inherit;
}
.project-toc-card span {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-block;
  width: fit-content;
  padding: 5px 7px;
  border: 1px solid currentColor;
  font: 500 0.62rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.project-toc-card h3 {
  position: relative;
  z-index: 2;
  max-width: 11ch;
  margin: 0;
  text-align: center;
  font: 700 clamp(1.55rem, 2.2vw, 2.35rem)/0.92 Fraunces, serif;
  letter-spacing: -0.045em;
}
.project-toc-card--directions {
  border-radius: 24px 10px 10px 10px;
  background: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 13px
    ),
    #ffcf5c;
}
.project-toc-card--texts {
  border-radius: 10px 28px 10px 10px;
  background: #18191a;
  color: var(--cream);
}
.project-toc-card--texts::after {
  border-color: rgba(255, 246, 223, 0.22);
}
.project-toc-card--pedagogy {
  border-radius: 10px 10px 28px 10px;
  background: repeating-linear-gradient(
    0deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 16px
    ),
    #f3e6b5;
}
.project-toc-card--tools {
  border-radius: 10px 10px 24px 24px;
  background: #e5defb;
}
@media (max-width: 760px) {
  .project-toc__head {
    align-items: start;
    flex-direction: column;
  }
  .project-toc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-toc-card {
    min-height: 105px;
  }
  .project-toc-card h3 {
    font: 600 clamp(1.25rem, 2.2vw, 1.65rem)/0.92 Fraunces, serif;
  }
}
/* =========================================================
   YAMK-TUTKIMUS: NÄYTELMÄN SISÄISET PELIT
   ========================================================= */
.yamk-dialog-content {
  --yamk-paper: #fff6df;
  --yamk-lilac: #e5defb;
  --yamk-mint: #b9d4cf;
  --yamk-sun: #ffcf5c;
  --yamk-ink: #161717;
}
.yamk-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 42px;
}
.yamk-meta-grid article {
  padding: 16px;
  border: 2px solid var(--ink);
  background: var(--yamk-paper);
}
.yamk-meta-grid span,
.yamk-structure-grid span,
.yamk-core-list span,
.yamk-pilot-scenes span {
  display: block;
  margin-bottom: 12px;
  font: 500 0.68rem/1.25 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.yamk-meta-grid strong {
  display: block;
  font: 700 clamp(1.05rem, 1.6vw, 1.35rem)/1.05 Fraunces, serif;
  letter-spacing: -0.025em;
}
.yamk-dialog-section {
  margin: 42px 0;
}
.yamk-dialog-section h3 {
  max-width: 16ch;
  margin: 0 0 18px;
  font: 700 clamp(2rem, 3.6vw, 3.6rem)/0.92 Fraunces, serif;
  letter-spacing: -0.055em;
}
.yamk-dialog-section p {
  margin: 0;
}
.yamk-dialog-section p + p {
  margin-top: 16px;
}
.yamk-dialog-section--question {
  padding: 28px;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 14px
    ),
    var(--yamk-lilac);
  box-shadow: 7px 7px 0 var(--ink);
}
.yamk-structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.yamk-structure-grid article,
.yamk-core-list article,
.yamk-pilot-scenes article {
  padding: 10px;
  border: 2px solid var(--ink);
  background: var(--yamk-paper);
}
.yamk-structure-grid article:nth-child(2),
.yamk-core-list article:nth-child(2),
.yamk-pilot-scenes article:nth-child(2) {
  background: var(--yamk-mint);
}
.yamk-structure-grid article:nth-child(3),
.yamk-core-list article:nth-child(3),
.yamk-pilot-scenes article:nth-child(3) {
  background: var(--yamk-lilac);
}
.yamk-structure-grid article:nth-child(4),
.yamk-core-list article:nth-child(4) {
  background: var(--yamk-sun);
}
.yamk-structure-grid h4,
.yamk-pilot-scenes h4 {
  margin: 0 0 12px;
  font: 700 clamp(1.35rem, 2vw, 1.7rem)/0.98 Fraunces, serif;
  letter-spacing: -0.04em;
}
.yamk-structure-grid p,
.yamk-core-list p,
.yamk-pilot-scenes p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.yamk-dialog-section--core {
  padding-top: 10px;
}
.yamk-core-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.yamk-core-list span {
  width: fit-content;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.72);
}
.yamk-dialog-section--pilot {
  padding: 28px;
  border: 2px solid var(--ink);
  background: var(--yamk-sun);
  box-shadow: 7px 7px 0 var(--ink);
}
.yamk-pilot-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.yamk-dialog-link {
  display: inline-flex;
  margin-top: 10px;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font: 500 0.78rem/1 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.yamk-dialog-link:hover,
.yamk-dialog-link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--yamk-sun);
}
@media (max-width: 900px) {
  .yamk-meta-grid,
  .yamk-structure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .yamk-pilot-scenes {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .yamk-meta-grid,
  .yamk-structure-grid,
  .yamk-core-list {
    grid-template-columns: 1fr;
  }
  .yamk-dialog-section--question,
  .yamk-dialog-section--pilot {
    padding: 22px;
    box-shadow: 5px 5px 0 var(--ink);
  }
}
/* AMK-opinnäytteen artikkeli käyttää YAMK-artikkelin rakennetta,
   mutta saa oman hieman vihreämmän värimaailman. */
.amk-dialog-content {
  --yamk-paper: #fff6df;
  --yamk-lilac: #b9d4cf;
  --yamk-mint: #dce6bf;
  --yamk-sun: #ffcf5c;
  --yamk-ink: #161717;
}
/* YAMK-artikkelin lähdeaineisto */
.yamk-dialog-section--sources {
  padding: 28px;
  border: 2px solid var(--ink);
  background: radial-gradient(
    rgba(22, 23, 23, 0.055) 1px,
    transparent 1.3px
    ),
    var(--yamk-paper);
  background-size: 12px 12px;
  box-shadow: 7px 7px 0 var(--ink);
}
.yamk-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.yamk-source-grid article {
  padding: 20px;
  border: 2px solid var(--ink);
  background: rgba(255, 250, 240, 0.86);
}
.yamk-source-grid article:nth-child(2) {
  background: var(--yamk-mint);
}
.yamk-source-grid article:nth-child(3) {
  background: var(--yamk-lilac);
}
.yamk-source-grid article:nth-child(4) {
  background: var(--yamk-sun);
}
.yamk-source-grid span {
  display: block;
  margin-bottom: 12px;
  font: 500 0.68rem/1.25 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.yamk-source-grid p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.yamk-source-grid cite {
  font-style: italic;
}
@media (max-width: 760px) {
  .yamk-source-grid {
    grid-template-columns: 1fr;
  }
  .yamk-dialog-section--sources {
    padding: 22px;
    box-shadow: 5px 5px 0 var(--ink);
  }
}
/* =========================================================
   AMK-ARTIKKELIN TARKENNUKSET
   ========================================================= */
/* Alun ydinaiheet pieniksi tunnisteiksi */
.amk-dialog-content .amk-meta-keywords strong {
  display: none;
}
.amk-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}
.amk-meta-tags em {
  display: inline-block;
  padding: 7px 8px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.72);
  font: 500 0.68rem/1.15 "DM Mono", monospace;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-style: normal;
}
/* Varmistetaan, etteivät pitkät metat riko laatikkoa */
.amk-dialog-content .yamk-meta-grid article {
  min-width: 0;
}
.amk-dialog-content .yamk-meta-grid strong {
  overflow-wrap: anywhere;
}
/* Tilanteen ohjaamisen viisi askelta: 3 + 2 -sommittelu */
.amk-steps-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.amk-steps-grid article {
  position: relative;
  min-height: 245px;
}
.amk-steps-grid article:nth-child(-n + 3) {
  grid-column: span 4;
}
.amk-steps-grid article:nth-child(n + 4) {
  grid-column: span 6;
}
/* Tehdään askelkorteista vähän prosessimaisemmat */
.amk-steps-grid article::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-right: 2px solid rgba(22, 23, 23, 0.28);
  border-bottom: 2px solid rgba(22, 23, 23, 0.28);
  transform: rotate(-45deg);
  pointer-events: none;
}
.amk-steps-grid article:last-child::after {
  display: none;
}
.amk-steps-grid h4 {
  max-width: 11ch;
}
.amk-steps-grid p {
  font-size: 0.98rem;
  line-height: 1.52;
}
/* Pienemmillä näytöillä 2 + 2 + 1 */
@media (max-width: 900px) {
  .amk-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .amk-steps-grid article:nth-child(n) {
    grid-column: span 1;
  }
  .amk-steps-grid article:last-child {
    grid-column: 1 / -1;
  }
}
/* Mobiilissa allekkain */
@media (max-width: 620px) {
  .amk-steps-grid {
    grid-template-columns: 1fr;
  }
  .amk-steps-grid article:last-child {
    grid-column: auto;
  }
  .amk-steps-grid article::after {
    display: none;
  }
}
.amk-source-note {
  margin-top: 24px;
  margin-left: 24px;
  margin-right: 24px;
  padding: 20px 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
}
.amk-source-note span {
  display: block;
  margin-bottom: 10px;
  font: 500 0.7rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.amk-source-note p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
}
.amk-source-note cite {
  font-style: italic;
}
/* =========================================================
   ESITTELY: NÄYTELMÄKIRJAILIJA
   ========================================================= */
.writer-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 12% 16%, rgba(229, 222, 251, 0.72), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(255, 207, 92, 0.34), transparent 34%),
    linear-gradient(135deg, #fff6df 0%, #f4ead2 52%, #e5defb 100%);
}
.writer-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(22, 23, 23, 0.05) 1px, transparent 1.4px);
  background-size: 13px 13px;
  opacity: 0.58;
  mix-blend-mode: multiply;
}
.writer-section > .container {
  position: relative;
  z-index: 1;
}
/* Otsikkoalue rauhallisemmaksi */
.writer-section .band-head {
  display: block;
  max-width: 980px;
  margin-bottom: 38px;
}
.writer-section .band-head .label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 16px;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.writer-section .band-head h2 {
  max-width: 11.5ch;
  margin: 0 0 22px;
  font: 700 clamp(3rem, 6vw, 6.25rem) / 0.88 Fraunces, serif;
  letter-spacing: -0.065em;
}
.writer-section .band-head p {
  max-width: 700px;
  margin: 0;
  padding: 18px 22px;
  border-left: 5px solid var(--ink);
  background: rgba(255, 250, 240, 0.82);
  font-size: 1.12rem;
  line-height: 1.55;
}
/* Kokonaisuus linkittyy projektisivun näytelmätekstikortteihin */
.writer-section .split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 22px;
  align-items: stretch;
}
/* Vasemman puolen pääkortti: tumma, rauhallinen, luettava */
.writer-section .pattern-note.coral-note {
  min-height: 0;
  padding: clamp(28px, 4vw, 42px);
  border: 2px solid var(--ink);
  background: radial-gradient(rgba(255, 246, 223, 0.14) 1px, transparent 1px),
    #18191a;
  background-size: 11px 11px;
  color: var(--cream);
  box-shadow: 9px 9px 5px var(--violet);
}
.writer-section .pattern-note.coral-note h3 {
  margin: 0 0 24px;
  color: #ffcf5c;
  font: 700 clamp(2rem, 3.2vw, 3.15rem) / 0.94 Fraunces, serif;
  letter-spacing: -0.05em;
}
.writer-section .pattern-note.coral-note p {
  max-width: 64ch;
  margin: 0;
  font-size: 1.11rem;
  line-height: 1.62;
}
.writer-section .pattern-note.coral-note p + p {
  margin-top: 18px;
}
.writer-section .writer-rights a {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Oikean puolen kolme korttia: samaa sukua tekstikorteille */
.writer-section .mini-list {
  display: grid;
  gap: 14px;
}
.writer-section .mini-list article {
  position: relative;
  min-height: 150px;
  padding: 24px 26px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 rgba(22, 23, 23, 0.22);
}
.writer-section .mini-list article:nth-child(1) {
  background: repeating-linear-gradient(
    45deg,
    rgba(22, 23, 23, 0.06) 0 1px,
    transparent 1px 14px
    ),
    var(--cream);
}
.writer-section .mini-list article:nth-child(2) {
  background: #e5defb;
}
.writer-section .mini-list article:nth-child(3) {
  background: #dce6bf;
}
.writer-section .mini-list article span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 7px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, 0.72);
  font: 500 0.64rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.writer-section .mini-list h3 {
  max-width: 15ch;
  margin: 0 0 12px;
  font: 700 clamp(1.55rem, 2.2vw, 2.25rem) / 0.96 Fraunces, serif;
  letter-spacing: -0.045em;
}
.writer-section .mini-list p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
/* Linkki selkeäksi toimintopainikkeeksi */
.writer-section > .container > p:last-child {
  margin: 32px 0 0;
}
.writer-section > .container > p:last-child a {
  display: inline-flex;
  padding: 14px 17px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 9px 9px 5px var(--violet);
  font: 500 0.78rem/1 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.writer-section > .container > p:last-child a:hover,
.writer-section > .container > p:last-child a:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--sun);
}
/* Mobiili */
@media (max-width: 860px) {
  .writer-section .split-feature {
    grid-template-columns: 1fr;
  }
  .writer-section .band-head h2 {
    max-width: 13ch;
  }
}
@media (max-width: 600px) {
  .writer-section .band-head h2 {
    font-size: clamp(2.45rem, 11vw, 3.7rem);
    line-height: 0.92;
  }
  .writer-section .band-head p {
    padding: 16px 18px;
    font-size: 1.03rem;
  }
  .writer-section .pattern-note.coral-note,
  .writer-section .mini-list article {
    padding: 24px 20px;
  }
  .writer-section .pattern-note.coral-note {
    box-shadow: 6px 6px 0 var(--ink);
  }
}
/* =========================================================
   ESITTELY: TEATTERIOPETTAJA
   ========================================================= */
.teacher-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 12% 14%, rgba(168, 221, 200, 0.48), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(255, 203, 71, 0.42), transparent 34%),
    linear-gradient(135deg, #d9eee7 0%, #fff6df 48%, #f4dfb4 100%);
}
.teacher-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(22, 23, 23, 0.055) 0 1px,
    transparent 1px 18px
    );
  background-size: 18px 18px;
  opacity: 0.8;
  mix-blend-mode: multiply;
}
.teacher-section > .container {
  position: relative;
  z-index: 1;
}
.teacher-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.98fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-bottom: 34px;
}
.teacher-head .label {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.teacher-head h2 {
  max-width: 11ch;
  margin: 0;
  font: 700 clamp(3rem, 6vw, 6.2rem) / 0.88 Fraunces, serif;
  letter-spacing: -0.065em;
}
.teacher-head p {
  max-width: 52ch;
  margin: 0;
  padding: 18px 22px;
  border-left: 5px solid var(--petrol);
  background: rgba(255, 250, 240, 0.82);
  font-size: 1.08rem;
  line-height: 1.58;
}
/* Ydin + sitaatti */
.teacher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
  gap: 52px;
  align-items: stretch;
  margin-top: 30px;
}
.teacher-main-card {
  padding: clamp(28px, 4vw, 42px);
  border: 2px solid var(--ink);
  background: #29272d;
  background-size: 12px 12px;
  color: #fff8e7;
  box-shadow: 9px 9px 10px var(--ink);
}
.teacher-card-label,
.teacher-quote span,
.teacher-subhead .label,
.teacher-skill-grid span,
.teacher-timeline span {
  display: inline-block;
  width: fit-content;
  padding: 6px 8px;
  border: 1px solid currentColor;
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.teacher-main-card h3 {
  max-width: 15ch;
  margin: 22px 0 22px;
  color: var(--sun);
  font: 700 clamp(2rem, 3.1vw, 2.6rem) / 0.92 Fraunces, serif;
  letter-spacing: -0.055em;
}
.teacher-main-card p {
  max-width: 68ch;
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.62;
}
.teacher-main-card p + p {
  margin-top: 18px;
}
.teacher-quote {
  align-self: center;
  max-width: 450px;
  padding: clamp(28px, 4vw, 42px);
  border: 2px solid var(--ink);
  border-radius: 38px;
  background: var(--sun);
  box-shadow: 9px 9px 10px var(--ink);
  transform: rotate(3deg);
}
.teacher-quote p {
  margin: 24px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.teacher-quote footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 23, 23, 0.28);
  font: 500 0.72rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Pedagogisen portfolion esittely */
.teacher-portfolio {
  margin-top: clamp(48px, 6vw, 78px);
  padding: clamp(28px, 4vw, 44px);
  border: 2px solid var(--ink);
  background: radial-gradient(rgba(22, 23, 23, 0.055) 1px, transparent 1.2px),
    var(--paper);
  background-size: 12px 12px;
  box-shadow: 10px 10px 0 var(--petrol);
}
.teacher-portfolio__intro {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(320px, 1.12fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: end;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--ink);
}
.teacher-portfolio__intro .label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 15px;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  background: var(--sun);
}
.teacher-portfolio__intro h3 {
  max-width: 11ch;
  margin: 0;
  font: 700 clamp(2.5rem, 4.7vw, 4.2rem) / .9 Fraunces, serif;
  letter-spacing: -.058em;
}
.teacher-portfolio__intro p {
  max-width: 59ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.teacher-portfolio__questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.teacher-portfolio__questions article {
  min-height: 170px;
  padding: 20px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .16);
}
.teacher-portfolio__questions article:nth-child(1) {
  background: #fff0b2;
}
.teacher-portfolio__questions article:nth-child(2) {
  background: var(--mint);
}
.teacher-portfolio__questions article:nth-child(3) {
  background: #e5defb;
}
.teacher-portfolio__questions article:nth-child(4) {
  background: #f8c4a6;
}
.teacher-portfolio__questions span {
  display: block;
  margin-bottom: 18px;
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .085em;
}
.teacher-portfolio__questions h4 {
  max-width: 22ch;
  margin: 0;
  font: 700 clamp(1.3rem, 2vw, 1.85rem) / 1 Fraunces, serif;
  letter-spacing: -.035em;
}
.teacher-portfolio__footer a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
  padding: 14px 17px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 3px 5px 2px var(--sun);
  font: 500 .76rem/1 "DM Mono", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.teacher-portfolio__footer a:hover,
.teacher-portfolio__footer a:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--sun);
}
/* Väliotsikot */
.teacher-experience,
.teacher-skills {
  margin-top: clamp(44px, 6vw, 76px);
}
.teacher-subhead {
  max-width: 840px;
  margin-bottom: 24px;
}
.teacher-subhead .label {
  margin-bottom: 14px;
  background: var(--paper);
}
.teacher-subhead h3 {
  max-width: 17ch;
  margin: 0;
  font: 700 clamp(2.2rem, 4.6vw, 3.8rem) / 0.9 Fraunces, serif;
  letter-spacing: -0.06em;
}
/* Työkokemus */
.teacher-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.teacher-timeline article {
  min-height: 255px;
  padding: 24px 22px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}
.teacher-timeline article:nth-child(2) {
  background: #e5defb;
}
.teacher-timeline article:nth-child(3) {
  background: #dce6bf;
  border-right: 0;
}
.teacher-timeline h4 {
  margin: 32px 0 12px;
  font: 700 clamp(1.55rem, 2.4vw, 2.25rem) / 0.96 Fraunces, serif;
  letter-spacing: -0.045em;
}
.teacher-timeline p {
  margin: 0;
  line-height: 1.52;
}
/* Opetettavat sisällöt */
.teacher-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.teacher-skill-grid article {
  min-height: 250px;
  padding: 18px 18px;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(22, 23, 23, 0.22);
}
/* Jokaisella opetuksen alueella oma sävy:
   väritys rytmittää kokonaisuutta ilman sisällöllisiä "pareja". */
.teacher-skill-grid article:nth-child(1) {
  background: #fffaf0;
}
.teacher-skill-grid article:nth-child(2) {
  background: #ddd7f2;
}
.teacher-skill-grid article:nth-child(3) {
  background: #d9e5bd;
}
.teacher-skill-grid article:nth-child(4) {
  background: #f2ad98;
}
.teacher-skill-grid article:nth-child(5) {
  background: #cfe3e6;
}
.teacher-skill-grid article:nth-child(6) {
  background: #f4d58c;
}
.teacher-skill-grid h4 {
  max-width: 12ch;
  margin: 24px 0 12px;
  font: 700 clamp(1.55rem, 2.2vw, 2.15rem) / 0.96 Fraunces, serif;
  letter-spacing: -0.045em;
}
.teacher-skill-grid p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
}
.teacher-skill-grid span {
  font-size: 1.16rem;
}
.teacher-skill-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  row-gap: 14px;
  align-content: start;
}
.teacher-skill-grid article > span {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: start;
}
.teacher-skill-grid article h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: none;
}
.teacher-skill-grid article p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}
/* Linkit */
/* Responsiivisuus */
@media (max-width: 980px) {
  .teacher-head,
  .teacher-grid,
  .teacher-portfolio__intro {
    grid-template-columns: 1fr;
  }
  .teacher-head h2,
  .teacher-subhead h3 {
    max-width: 13ch;
  }
  .teacher-quote {
    transform: none;
  }
  .teacher-timeline {
    grid-template-columns: 1fr;
  }
  .teacher-timeline article {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    min-height: 0;
  }
  .teacher-timeline article:last-child {
    border-bottom: 0;
  }
  .teacher-skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teacher-portfolio__footer {
    grid-template-columns: 1fr;
  }
  .teacher-portfolio__footer .section-more--compact {
    width: 100%;
  }
}
@media (max-width: 620px) {
  .teacher-head h2 {
    font-size: clamp(2.45rem, 11vw, 3.7rem);
    line-height: 0.92;
  }
  .teacher-head p {
    padding: 16px 18px;
    font-size: 1.03rem;
  }
  .teacher-main-card,
  .teacher-quote,
  .teacher-timeline article,
  .teacher-skill-grid article {
    padding: 24px 20px;
  }
  .teacher-main-card,
  .teacher-quote {
    box-shadow: 6px 6px 0 var(--ink);
  }
  .teacher-skill-grid,
  .teacher-portfolio__questions {
    grid-template-columns: 1fr;
  }
  .teacher-portfolio {
    padding: 24px 20px;
    box-shadow: 6px 6px 0 var(--petrol);
  }
  .teacher-portfolio__questions article {
    min-height: 0;
  }
  .teacher-subhead h3 {
    font-size: clamp(2.15rem, 10vw, 3.3rem);
  }
}
/* =========================================================
   ESITTELY: KEHITTÄJÄPROFIILIN MOBIILIKORJAUS
   ========================================================= */
.developer-profile,
.developer-profile__intro,
.developer-profile__text,
.developer-profile__cards {
  min-width: 0;
}
.developer-profile__intro .label {
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.developer-profile__intro h2,
.developer-profile__lead,
.developer-profile__text p,
.developer-profile-card h3,
.developer-profile-card p {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .developer-profile-section {
    overflow-x: hidden;
  }
  .developer-profile__intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .developer-profile__intro h2 {
    max-width: 100%;
    font-size: clamp(2.4rem, 12vw, 3.45rem);
    line-height: 0.94;
  }
  .developer-profile__lead {
    font-size: 1.2rem;
    line-height: 1.28;
  }
}
/* PEDAGOGINEN PORTFOLIO — rauhalliset lukupinnat kuvioiduissa osioissa */
.page-pedagogical .band-violet {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(240, 109, 87, 0.11) 0 12px,
    transparent 12px 24px
    );
}
.page-pedagogical .band-yellow {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(20, 20, 20, 0.05) 0 1px,
    transparent 1px 16px
    );
}
.page-pedagogical .band-mint {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(20, 20, 20, 0.05) 0 1px,
    transparent 1px 20px
    );
}
.section-reading-lead {
  width: 100%;
  max-width: 72ch;
  padding: 22px 26px;
  background: rgba(255, 250, 240, 0.95);
  font-size: 1.05rem;
  line-height: 1.65;
}
.content-band .section-reading-lead p {
  max-width: none;
  margin: 0;
}
.content-band .section-reading-lead p + p {
  margin-top: 1.15em;
}
.pedagogy-long.reading-panel {
  max-width: none;
  padding: 30px 32px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.pedagogy-long.reading-panel h3 {
  margin: 0 0 24px;
}
@media (max-width: 600px) {
  .section-reading-lead {
    padding: 19px 20px;
    font-size: 1rem;
    line-height: 1.6;
  }
  .pedagogy-long.reading-panel {
    padding: 24px 20px;
  }
}
/* =========================================================
   TAVOITEARTIKKELI — TAVOITEHIERARKIAN VISUAALINEN RAKENNE
   ========================================================= */
.objective-article-callout__hierarchy {
  counter-reset: objective-level;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  margin: 22px 0 2px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(22, 23, 23, .34);
}
.objective-hierarchy-item {
  counter-increment: objective-level;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "number title"
    "number question";
  column-gap: 13px;
  align-items: start;
  min-width: 0;
  padding: 14px 15px 15px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .22);
}
/* Kevyt porrastus laajasta tavoitteesta kohti konkreettista toimintaa. */
.objective-hierarchy-item:nth-of-type(1) {
  margin-left: 0;
  margin-right: 36px;
  background: var(--paper);
}
.objective-hierarchy-item:nth-of-type(2) {
  margin-left: 12px;
  margin-right: 24px;
  background: #fff0b2;
}
.objective-hierarchy-item:nth-of-type(3) {
  margin-left: 24px;
  margin-right: 12px;
  background: var(--mint);
}
.objective-hierarchy-item:nth-of-type(4) {
  margin-left: 36px;
  margin-right: 0;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .32);
}
.objective-hierarchy-item::before {
  content: "0" counter(objective-level);
  grid-area: number;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .06em;
}
.objective-hierarchy-item:nth-of-type(4)::before {
  border-color: var(--cream);
  background: var(--sun);
  color: var(--ink);
}
.objective-hierarchy-item > span {
  grid-area: title;
  display: block;
  min-width: 0;
  margin: 1px 0 0;
  font: 500 .72rem/1.15 "DM Mono", monospace;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.objective-article-callout .objective-hierarchy-item > p {
  grid-area: question;
  max-width: none;
  min-width: 0;
  margin: 5px 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}
/* HTML:n →-merkit piirretään alas osoittaviksi nuoliksi. */
.objective-hierarchy-arrow {
  position: relative;
  display: block;
  width: 24px;
  height: 22px;
  margin: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.objective-hierarchy-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11px;
  width: 2px;
  height: 14px;
  background: var(--ink);
}
.objective-hierarchy-arrow::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(2) {
  margin-left: 18px;
}
.objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(4) {
  margin-left: 30px;
}
.objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(6) {
  margin-left: 42px;
}
@media (max-width: 520px) {
  .objective-article-callout__hierarchy {
    margin-top: 20px;
    padding-top: 17px;
  }
  .objective-hierarchy-item:nth-of-type(1),
  .objective-hierarchy-item:nth-of-type(2),
  .objective-hierarchy-item:nth-of-type(3),
  .objective-hierarchy-item:nth-of-type(4) {
    margin-left: 0;
    margin-right: 0;
  }
  .objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(2),
  .objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(4),
  .objective-article-callout__hierarchy > .objective-hierarchy-arrow:nth-child(6) {
    margin-left: 18px;
  }
  .objective-hierarchy-item {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 11px;
    padding: 13px 13px 14px;
  }
  .objective-hierarchy-item::before {
    width: 34px;
    height: 34px;
    font-size: .62rem;
  }
  .objective-article-callout .objective-hierarchy-item > p {
    font-size: 1rem;
  }
}
/* ===== /TAVOITEHIERARKIA ===== */
/* =========================================================
   TOIMINNALLINEN OPPIMINEN — OTSIKKO + KAKSI PALSTAA + LAINAUS
   ========================================================= */
#toiminnallinen .toiminnallinen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr)
    minmax(380px, .85fr);
  grid-template-areas: "head article"
    "intro article"
    "quote quote";
  column-gap: 46px;
  row-gap: 32px;
  align-items: start;
}
/* =========================================================
   OSION OTSIKKO
   ========================================================= */
#toiminnallinen .toiminnallinen-head {
  grid-area: head;
}
#toiminnallinen .toiminnallinen-head .label {
  display: inline-block;
  margin-bottom: 18px;
}
#toiminnallinen .toiminnallinen-head h2 {
  max-width: 10ch;
  margin: 0;
  font: 700 clamp(3.15rem, 5.6vw, 5.65rem) / .88
    Fraunces,
    serif;
  letter-spacing: -.058em;
}
/* =========================================================
   VASEN TEKSTIPALSTA
   ========================================================= */
#toiminnallinen .toiminnallinen-opening__intro {
  grid-area: intro;
  min-width: 0;
  padding: 0;
}
#toiminnallinen .toiminnallinen-opening__intro p {
  max-width: 62ch;
  margin: 0 0 20px;
  font-size: 1.04rem;
  line-height: 1.6;
}
#toiminnallinen .toiminnallinen-research-note {
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid rgba(22, 23, 23, .35);
  font-size: .93rem;
}
/* =========================================================
   OIKEA ARTIKKELIPANEELI
   ========================================================= */
#toiminnallinen .objective-article-callout {
  grid-area: article;
  align-self: start;
  width: 100%;
  min-width: 0;
  margin: 0;
}
/* =========================================================
   ALAREUNAN LEVEÄ YAMK-LAINAUS
   ========================================================= */
#toiminnallinen .toiminnallinen-quote-wrap {
  grid-area: quote;
  width: min(100%, 1080px);
  margin: 20px auto 0;
}
#toiminnallinen .author-quote--ink {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px 44px 38px;
  background: var(--violet);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--sun);
}
#toiminnallinen .author-quote--ink p {
  margin: 0;
  font-size: clamp(1.2rem, 1.55vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -.018em;
}
#toiminnallinen .author-quote--ink footer {
  margin-top: 24px;
  font-size: .67rem;
  line-height: 1.45;
}
/* =========================================================
   TABLETTI
   ========================================================= */
@media (max-width: 900px) {
  #toiminnallinen .toiminnallinen-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "head"
      "intro"
      "article"
      "quote";
    gap: 28px;
  }
  #toiminnallinen .toiminnallinen-head h2 {
    max-width: 12ch;
  }
  #toiminnallinen .objective-article-callout {
    width: min(100%, 620px);
  }
  #toiminnallinen .toiminnallinen-quote-wrap {
    width: 100%;
    margin-top: 8px;
  }
}
/* =========================================================
   PUHELIN
   ========================================================= */
@media (max-width: 520px) {
  #toiminnallinen .objective-article-callout {
    width: 100%;
    padding: 24px 21px 26px;
  }
  #toiminnallinen .author-quote--ink {
    padding: 25px 22px;
  }
}
/* =========================================================
   TUTKIMUKSET JA KEHITTÄMISTYÖ — ROHKEAMPI TAUSTA, V4
   ========================================================= */
/*
  Tavoite: tutkimusosion pitää alkaa selvästi uutena lukuna.
  Valitaan rohkeampi, viileä turkoosi tausta ja iso, selkeä timanttikuvio,
  joka ei muistuta raitakangasta tai hillittyä paperipintaa.
  Tekstit pysyvät omissa korteissaan, joten tausta saa olla graafisempi.*/
#tutkimukset {
  background-color: #7fb9c3;
  background-image: linear-gradient(45deg,
    rgba(255, 250, 240, 0.22) 25%,
    transparent 25%,
    transparent 75%,
    rgba(255, 250, 240, 0.22) 75%,
    rgba(255, 250, 240, 0.22) 100%),
    linear-gradient(-45deg,
    rgba(255, 250, 240, 0.18) 25%,
    transparent 25%,
    transparent 75%,
    rgba(255, 250, 240, 0.18) 75%,
    rgba(255, 250, 240, 0.18) 100%),
    linear-gradient(
    rgba(22, 23, 23, 0.055) 1px,
    transparent 1px
    ),
    linear-gradient(
    90deg,
    rgba(22, 23, 23, 0.045) 1px,
    transparent 1px
    );
  background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px;
  background-position: 0 0, 44px 44px, 0 0, 0 0;
}
/* Johdantolaatikko pysyy paperimaisena taustan päällä. */
#tutkimukset .section-reading-lead {
  background: rgba(255, 250, 240, 0.94);
  border: 1px solid rgba(22, 23, 23, 0.14);
}
/* Kortit erotetaan taustasta aavistuksen jyrkemmin. */
#tutkimukset .research-card--main {
  box-shadow: 11px 11px 0 var(--ink);
}
#tutkimukset .research-card--secondary {
  box-shadow: 8px 8px 0 rgba(22, 23, 23, 0.18);
}
/* =========================================================
   TUTKIMUSOSIO — KOMPAKTIT KORTIT JA POPUP-SISÄÄNKÄYNNIT
   ========================================================= */
.research-development-arc {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 30px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  background: rgba(255, 250, 240, 0.92);
  box-shadow: 5px 5px 0 rgba(22, 23, 23, 0.18);
}
.research-development-arc > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.research-development-arc span {
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.research-development-arc strong {
  font: 700 1rem/1.08 Fraunces, Georgia, serif;
}
.research-development-arc i {
  flex: 0 0 auto;
  font: 500 1.25rem/1 "DM Mono", monospace;
  font-style: normal;
}
#tutkimukset .research-card {
  min-height: 0;
}
#tutkimukset .research-card > p:not(.research-card__subtitle) {
  font-size: 1rem;
  line-height: 1.58;
}
.research-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 24px;
}
.research-dialog-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 11px 14px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 500 0.76rem/1 "DM Mono", monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.research-dialog-open:hover,
.research-dialog-open:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.research-card__actions .research-download {
  margin-top: 0;
}
@media (max-width: 600px) {
  .research-development-arc {
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
  }
  .research-development-arc strong {
    font-size: 0.92rem;
  }
  .research-development-arc i {
    padding-top: 12px;
  }
  .research-card__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* =========================================================
   KIRJASTO — NYKYINEN ESITTELY
   ========================================================= */
#kirjasto .section-reading-lead {
  max-width: 900px;
}
#kirjasto .section-reading-lead p + p {
  margin-top: 1.25em;
}
#kirjasto .library-sources__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  margin-bottom: 56px;
}
#kirjasto .library-sources__intro-copy {
  min-width: 0;
}
#kirjasto .library-sources__intro-copy .section-reading-lead {
  max-width: 760px;
}
#kirjasto .library-sources__intro-photo {
  min-width: 0;
  align-self: center;
}
#kirjasto .library-photo-feature {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: #c9c2e8;
  background-position: center;
  box-shadow: 8px 8px 0 var(--ink);
}
#kirjasto .library-photo-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#kirjasto .library-sources__selection-head {
  max-width: 760px;
  margin: 0 40px 30px;
  padding-top: 30px;
  border-top: 2px solid var(--ink);
}
#kirjasto .library-sources__selection-head > .label {
  display: inline-block;
  margin-bottom: 11px;
}
#kirjasto .library-sources__selection-head h3 {
  max-width: 15ch;
  margin: 0 0 14px;
  font: 700 clamp(2rem, 3.6vw, 3.75rem) / .9 Fraunces, Georgia, serif;
  letter-spacing: -.05em;
}
#kirjasto .library-sources__selection-head p {
  max-width: 720px;
  margin: 0;
  font-size: .96rem;
  line-height: 1.55;
}
@media (max-width: 900px) {
  #kirjasto .library-sources__intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .62fr);
    gap: 30px;
    align-items: start;
  }
}
@media (max-width: 700px) {
  #kirjasto .library-sources__intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 42px;
  }
  #kirjasto .library-sources__intro-photo {
    width: min(82%, 460px);
    justify-self: center;
  }
  #kirjasto .library-photo-feature {
    box-shadow: 6px 6px 0 var(--ink);
  }
}
@media (max-width: 600px) {
  #kirjasto .library-sources__selection-head {
    margin: 0 12px 24px;
  }
}
@media (max-width: 480px) {
  #kirjasto .library-sources__intro-photo {
    width: 100%;
  }
  #kirjasto .library-photo-feature {
    aspect-ratio: 5 / 6;
  }
}
/* ---------------------------------------------------------
   Artikkelien välinen jatkolinkki
   --------------------------------------------------------- */
.popup-article__crosslink {
  margin: 50px 0 42px;
  padding: 24px 26px 25px;
  border: 2px solid var(--ink);
  background: #fff0b2;
  box-shadow: 7px 7px 0 var(--ink);
}
.popup-article__crosslink--game {
  background: var(--mint);
}
.popup-article__crosslink > span {
  display: block;
  margin-bottom: 9px;
  font: 500 0.66rem/1 "DM Mono", monospace;
  letter-spacing: 0.09em;
}
.popup-article__crosslink h3 {
  margin: 0 0 8px;
  font: 700 clamp(1.55rem, 2.4vw, 2.25rem) / 0.96 Fraunces, Georgia, serif;
  letter-spacing: -0.035em;
}
.popup-article__crosslink p {
  max-width: 58ch;
  margin: 0 0 17px;
  font-size: 0.91rem;
  line-height: 1.48;
}
.popup-article__crosslink button {
  padding: 9px 0 4px;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font: 600 0.74rem/1.2 "DM Mono", monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.popup-article__crosslink button span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .popup-article__crosslink button:hover span {
    transform: translateX(3px);
  }
}
@media (max-width: 480px) {
  .popup-article__crosslink {
    padding: 21px 19px 22px;
    box-shadow: 5px 5px 0 var(--ink);
  }
}
/* =========================================================
   PEDAGOGINEN PORTFOLIO — KIRJOITUKSIA INTRO-OSIOSSA
   ========================================================= */
.pedagogy-intro-writings {
  display: grid;
  grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 40px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(22, 23, 23, .48);
}
.pedagogy-intro-writings__label {
  display: flex;
  align-items: center;
  padding: 17px 18px 17px 0;
}
.pedagogy-intro-writings__label .label {
  margin: 0;
}
.pedagogy-intro-writings__link {
  position: relative;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 0 13px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border: 0;
  border-left: 1px solid rgba(22, 23, 23, .48);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pedagogy-intro-writings__mark {
  display: block;
  width: 8px;
  height: 100%;
  min-height: 44px;
}
.pedagogy-intro-writings__link--objective .pedagogy-intro-writings__mark {
  background: #f2cf55;
}
.pedagogy-intro-writings__link--game .pedagogy-intro-writings__mark {
  background: #79bea9;
}
.pedagogy-intro-writings__copy {
  min-width: 0;
}
.pedagogy-intro-writings__copy strong {
  display: block;
  font: 700 clamp(1.08rem, 1.45vw, 1.42rem) / 1.03 Fraunces, Georgia, serif;
  letter-spacing: -0.025em;
}
.pedagogy-intro-writings__copy small {
  display: block;
  margin-top: 5px;
  font-size: .76rem;
  line-height: 1.35;
}
.pedagogy-intro-writings__arrow {
  font: 500 .9rem/1 "DM Mono", monospace;
  transition: transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .pedagogy-intro-writings__link:hover,
  .pedagogy-intro-writings__link:focus-visible {
    background: rgba(255, 250, 240, .52);
  }
  .pedagogy-intro-writings__link:hover .pedagogy-intro-writings__arrow,
  .pedagogy-intro-writings__link:focus-visible .pedagogy-intro-writings__arrow {
    transform: translate(2px, -2px);
  }
}
/* Kirjoitukset ja varsinainen sisältökartta ovat eri asioita. */
.pedagogy-intro-writings + .pedagogy-toc-v5 {
  margin-top: 34px;
}
@media (max-width: 760px) {
  .pedagogy-intro-writings {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }
  .pedagogy-intro-writings__label {
    padding: 14px 0 11px;
  }
  .pedagogy-intro-writings__link {
    border-left: 0;
    border-top: 1px solid rgba(22, 23, 23, .42);
    padding: 14px 4px;
  }
  .pedagogy-intro-writings__mark {
    min-height: 40px;
  }
  .pedagogy-intro-writings + .pedagogy-toc-v5 {
    margin-top: 30px;
  }
}
/* =========================================================
   PEDAGOGISEN PORTFOLION FINAALI — SYNTEESI
   ========================================================= */
.pedagogy-closing-synthesis {
  position: relative;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 88px;
}
.pedagogy-closing-synthesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr);
  gap: clamp(46px, 6vw, 90px);
  align-items: start;
}
/* ---------------------------------------------------------
   Vasen: kokoava päätelmä
   --------------------------------------------------------- */
.pedagogy-closing-synthesis__copy {
  min-width: 0;
}
.pedagogy-closing-synthesis__copy > .label {
  display: inline-block;
  margin-bottom: 18px;
}
.pedagogy-closing-synthesis__copy h2 {
  max-width: 9.7ch;
  margin: 0;
  font: 700 clamp(3.25rem, 6.2vw, 6.4rem) / .86 Fraunces, Georgia, serif;
  letter-spacing: -.06em;
}
.pedagogy-closing-synthesis__text {
  max-width: 700px;
  margin-top: 34px;
  padding: 28px 30px;
  border: 2px solid var(--ink);
  background: rgba(255, 250, 240, .95);
  box-shadow: 8px 8px 0 rgba(22, 23, 23, .16);
}
.pedagogy-closing-synthesis__text p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
}
.pedagogy-closing-synthesis__text p + p {
  margin-top: 1.35em;
}
/* ---------------------------------------------------------
   Oikea: neljä rinnakkaista näkökulmaa
   --------------------------------------------------------- */
.pedagogy-closing-synthesis__map {
  min-width: 0;
}
.pedagogy-closing-synthesis__map-head {
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--ink);
}
.pedagogy-closing-synthesis__map-head > span {
  display: block;
  font: 500 .7rem/1 "DM Mono", monospace;
  letter-spacing: .09em;
}
.pedagogy-closing-synthesis__map-head p {
  max-width: 48ch;
  margin: 7px 0 0;
  font-size: .88rem;
  line-height: 1.45;
}
.pedagogy-closing-dimensions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pedagogy-closing-dimension {
  min-width: 0;
  min-height: 190px;
  padding: 20px 20px 21px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .16);
}
.pedagogy-closing-dimension--action {
  background: #fff0b2;
}
.pedagogy-closing-dimension--interaction {
  background: var(--mint);
}
.pedagogy-closing-dimension--work {
  background: #f8c4a6;
}
.pedagogy-closing-dimension--assessment {
  background: #e5defb;
}
.pedagogy-closing-dimension > span {
  display: block;
  margin-bottom: 12px;
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .09em;
}
.pedagogy-closing-dimension h3 {
  max-width: 14ch;
  margin: 0 0 9px;
  font: 700 clamp(1.32rem, 2vw, 1.9rem) / .98 Fraunces, Georgia, serif;
  letter-spacing: -.035em;
}
.pedagogy-closing-dimension p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.48;
}
/* ---------------------------------------------------------
   Yhteinen päämäärä
   --------------------------------------------------------- */
.pedagogy-closing-agency {
  position: relative;
  margin-top: 18px;
  padding: 26px 28px 27px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--coral);
}
.pedagogy-closing-agency::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: var(--ink);
  transform: translateX(-50%);
}
.pedagogy-closing-agency__label {
  display: block;
  margin-bottom: 9px;
  color: var(--sun);
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .09em;
}
.pedagogy-closing-agency h3 {
  margin: 0 0 10px;
  font: 700 clamp(2rem, 3.3vw, 3.25rem) / .92 Fraunces, Georgia, serif;
  letter-spacing: -.045em;
}
.pedagogy-closing-agency p {
  max-width: 52ch;
  margin: 0;
  font-size: .93rem;
  line-height: 1.52;
}
@media (max-width: 900px) {
  .pedagogy-closing-synthesis__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .pedagogy-closing-synthesis__copy h2 {
    max-width: 11ch;
  }
  .pedagogy-closing-synthesis__map {
    max-width: 760px;
  }
}
@media (max-width: 600px) {
  .pedagogy-closing-synthesis {
    padding-top: 66px;
    padding-bottom: 62px;
  }
  .pedagogy-closing-synthesis__copy h2 {
    max-width: none;
    font-size: clamp(2.7rem, 12vw, 4.05rem);
    line-height: .9;
  }
  .pedagogy-closing-synthesis__text {
    margin-top: 26px;
    padding: 22px 20px;
  }
  .pedagogy-closing-dimensions {
    grid-template-columns: 1fr;
  }
  .pedagogy-closing-dimension {
    min-height: 0;
    padding: 18px 18px 19px;
  }
  .pedagogy-closing-dimension h3 {
    max-width: 18ch;
  }
  .pedagogy-closing-agency {
    padding: 23px 21px 24px;
    box-shadow: 6px 6px 0 var(--coral);
  }
}
/* =========================================================
   HARJOITUSPROSESSI — VISUAALINEN MIKROSYKLI
   ========================================================= */
.process-cycle-panel {
  min-width: 0;
  padding: 24px 24px 25px;
  border: 2px solid var(--ink);
  background: rgba(255, 250, 240, .72);
  box-shadow: 8px 8px 0 rgba(22, 23, 23, .17);
}
.process-cycle-panel__head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.process-cycle-panel__head > .label {
  display: inline-block;
  margin-bottom: 8px;
}
.process-cycle-panel__head > p {
  max-width: 42ch;
  margin: 0;
  font-size: .88rem;
  line-height: 1.43;
}
.process-cycle {
  position: relative;
  display: grid;
  gap: 0;
  min-width: 0;
}
.process-cycle article {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(22, 23, 23, .16);
}
/* Porrastus tekee tarkentumisen näkyväksi. */
.process-cycle article:nth-of-type(1) {
  margin-right: 26px;
  background: var(--paper);
}
.process-cycle article:nth-of-type(2) {
  margin-left: 6px;
  margin-right: 20px;
  background: #fff0b2;
}
.process-cycle article:nth-of-type(3) {
  margin-left: 12px;
  margin-right: 13px;
  background: var(--mint);
}
.process-cycle article:nth-of-type(4) {
  margin-left: 19px;
  margin-right: 7px;
  background: #e5defb;
}
.process-cycle article:nth-of-type(5) {
  margin-left: 26px;
  background: #f8c4a6;
}
.process-cycle article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: 500 .68rem/1 "DM Mono", monospace;
}
.process-cycle strong {
  display: block;
  margin-bottom: 4px;
  font: 500 .72rem/1.05 "DM Mono", monospace;
  letter-spacing: .09em;
}
.process-cycle article p {
  margin: 0;
  font: 700 clamp(.98rem, 1.3vw, 1.17rem) / 1.08 Fraunces, Georgia, serif;
  letter-spacing: -.023em;
}
.process-cycle > i {
  position: relative;
  display: block;
  width: 30px;
  height: 22px;
  margin-left: 21px;
  font-size: 0;
  font-style: normal;
}
.process-cycle > i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 13px;
  width: 2px;
  height: 14px;
  background: var(--ink);
}
.process-cycle > i::after {
  content: "";
  position: absolute;
  left: 9px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.process-cycle > i:nth-of-type(1) {
  margin-left: 24px;
}
.process-cycle > i:nth-of-type(2) {
  margin-left: 30px;
}
.process-cycle > i:nth-of-type(3) {
  margin-left: 36px;
}
.process-cycle > i:nth-of-type(4) {
  margin-left: 43px;
}
.process-cycle-panel__note {
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ink);
}
.process-cycle-panel__note p {
  max-width: 58ch;
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
}
.process-cycle-panel__note p + p {
  margin-top: 11px;
}
.process-scale-bridge {
  max-width: 880px;
  margin: 44px auto 31px;
  padding: 19px 22px;
  border-left: 4px solid var(--ink);
  background: rgba(255, 250, 240, .62);
  font-size: .96rem;
  line-height: 1.55;
}
.process-scale-bridge strong {
  font-weight: 700;
}
@media (max-width: 900px) {
  .process-cycle-panel {
    max-width: 680px;
    margin-top: 4px;
  }
  .process-scale-bridge {
    margin-top: 36px;
  }
}
@media (max-width: 600px) {
  .process-cycle-panel {
    padding: 19px 16px 20px;
    box-shadow: 5px 5px 0 rgba(22, 23, 23, .17);
  }
  .process-cycle article:nth-of-type(n) {
    margin-left: 0;
    margin-right: 0;
  }
  .process-cycle > i:nth-of-type(n) {
    margin-left: 20px;
  }
  .process-cycle article {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    min-height: 76px;
    padding: 12px 13px;
  }
  .process-cycle article > span {
    width: 35px;
    height: 35px;
    font-size: .62rem;
  }
  .process-scale-bridge {
    margin: 32px 0 26px;
    padding: 16px 17px;
  }
}
/* =========================================================
   YHTEYS-SIVU
   ========================================================= */
.page-contact .contact-hero h1 {
  max-width: 9ch;
}
.page-contact .contact-hero p {
  max-width: 760px;
}
/* Pääyhteystiedot */
.contact-main {
  padding: clamp(64px, 8vw, 104px) 0;
}
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: start;
}
.contact-direct {
  padding: clamp(28px, 4vw, 42px);
  border: 2px solid var(--ink);
  background: #232324;
  color: var(--cream);
  box-shadow: 7px 7px 0 var(--sun);
}
.contact-direct > .label {
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid currentColor;
  color: var(--cream);
}
.contact-direct h2 {
  max-width: 9ch;
  margin: 26px 0 30px;
  color: var(--sun);
  font: 700 clamp(2.5rem, 4.4vw, 4.5rem) / 1 Fraunces, serif;
  letter-spacing: -.055em;
}
.contact-direct__links {
  display: grid;
  border-top: 1px solid rgba(255, 246, 223, .28);
}
.contact-direct__links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow"
    "value arrow";
  gap: 5px 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 246, 223, .28);
}
.contact-direct__links a span {
  grid-area: label;
  font: 500 .68rem / 1 "DM Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
}
.contact-direct__links a strong {
  grid-area: value;
  min-width: 0;
  font-size: clamp(1rem, 1.55vw, 1.24rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.contact-direct__links a i {
  grid-area: arrow;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 246, 223, .72);
  border-radius: 50%;
  font-style: normal;
  transition: transform .2s ease,
    background-color .2s ease,
    color .2s ease;
}
.contact-direct__links a:hover i,
.contact-direct__links a:focus-visible i {
  transform: translateX(4px);
  background: var(--sun);
  color: var(--ink);
}
/* Yhteistyökuvaus: työn profiili, ei yhteydenoton ehtolista */
.contact-collaboration {
  padding-top: 6px;
}
.contact-collaboration > .label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--sun);
}
.contact-collaboration > h2 {
  max-width: 13ch;
  margin: 0 0 26px;
  font: 700 clamp(2.8rem, 5vw, 5.25rem) / .9 Fraunces, serif;
  letter-spacing: -.06em;
}
.contact-collaboration__lead {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.62;
}
.contact-collaboration__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 680px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(22, 23, 23, .32);
}
.contact-collaboration__areas span {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: rgba(255, 250, 240, .78);
  font: 500 .67rem / 1 "DM Mono", monospace;
  letter-spacing: .065em;
  text-transform: uppercase;
}
/* Linkit */
.contact-links-section {
  position: relative;
  overflow: hidden;
  padding: clamp(66px, 8vw, 104px) 0;
  background: linear-gradient(
    45deg,
    rgba(255, 203, 71, .065) 25%,
    transparent 25% 75%,
    rgba(255, 203, 71, .065) 75%
    ),
    linear-gradient(
    45deg,
    rgba(255, 203, 71, .065) 25%,
    transparent 25% 75%,
    rgba(255, 203, 71, .065) 75%
    ),
    #1b3037;
  background-position: 0 0, 24px 24px, 0 0;
  background-size: 48px 48px;
  color: var(--cream);
}
.contact-links-head {
  max-width: 760px;
  margin-bottom: clamp(34px, 5vw, 54px);
}
.contact-links-head .label {
  display: inline-block;
  margin-bottom: 17px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 246, 223, .72);
}
.contact-links-head h2 {
  max-width: 12ch;
  margin: 0;
  font: 700 clamp(2.8rem, 5vw, 4.9rem) / .9 Fraunces, serif;
  letter-spacing: -.055em;
}
/* Varsinaiset linkit ovat yksi selkeä pystysuuntainen lista. */
.contact-link-list {
  max-width: 980px;
  border-top: 2px solid rgba(255, 246, 223, .82);
}
.contact-link-row {
  display: grid;
  grid-template-columns: minmax(145px, .28fr) minmax(0, 1fr) 44px;
  gap: 22px;
  align-items: center;
  min-height: 104px;
  padding: 19px 4px;
  border-bottom: 1px solid rgba(255, 246, 223, .38);
  color: var(--cream);
  transition: padding-left .2s ease,
    background-color .2s ease;
}
.contact-link-row:hover,
.contact-link-row:focus-visible {
  padding-left: 14px;
  background: rgba(255, 246, 223, .07);
  outline: none;
}
.contact-link-row__type {
  font: 500 .68rem / 1.3 "DM Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
}
.contact-link-row__content {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.contact-link-row__content strong {
  font: 700 clamp(1.5rem, 2.4vw, 2.25rem) / 1 Fraunces, serif;
  letter-spacing: -.035em;
}
.contact-link-row__content small {
  font-size: .82rem;
  line-height: 1.4;
  opacity: .68;
}
.contact-link-row > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 246, 223, .62);
  border-radius: 50%;
  font-style: normal;
  transition: transform .2s ease,
    background-color .2s ease,
    color .2s ease;
}
.contact-link-row:hover > i,
.contact-link-row:focus-visible > i {
  transform: translateX(4px);
  background: var(--cream);
  color: var(--ink);
}
/* Sosiaalinen media erotetaan julkaisu- ja ammattilinkeistä. */
.contact-social {
  display: grid;
  grid-template-columns: minmax(145px, .28fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  max-width: 980px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 246, 223, .38);
}
.contact-social__label {
  padding-top: 12px;
  font: 500 .68rem / 1.3 "DM Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
}
.contact-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-social__links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name arrow"
    "detail arrow";
  gap: 3px 20px;
  align-items: center;
  min-width: 230px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 246, 223, .6);
  color: var(--cream);
  transition: background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}
.contact-social__links a:hover,
.contact-social__links a:focus-visible {
  transform: translateY(-2px);
  background: var(--cream);
  color: var(--ink);
  outline: none;
}
.contact-social__links span {
  grid-area: name;
  font-weight: 700;
}
.contact-social__links small {
  grid-area: detail;
  font-size: .72rem;
  opacity: .72;
}
.contact-social__links i {
  grid-area: arrow;
  font-style: normal;
}
.contact-arrow--diagonal {
  display: inline-block;
  font: inherit;
  line-height: 1;
  transform: rotate(-45deg);
}
/* Yhteyssivun responsiivisuus */
@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
  }
  .contact-direct {
    max-width: 720px;
  }
}
@media (max-width: 620px) {
  .page-contact .contact-hero h1 {
    font-size: clamp(3.1rem, 15vw, 4.6rem);
  }
  .page-contact .contact-hero p {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  .contact-main {
    padding: 58px 0 64px;
  }
  .contact-direct {
    padding: 26px 22px;
    box-shadow: 5px 5px 0 var(--sun);
  }
  .contact-collaboration > h2 {
    font-size: clamp(2.7rem, 12vw, 3.8rem);
  }
  .contact-collaboration__areas {
    margin-top: 24px;
    padding-top: 20px;
  }
  .contact-link-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "type arrow"
      "content arrow";
    gap: 8px 14px;
    min-height: 0;
    padding: 18px 0;
  }
  .contact-link-row:hover,
  .contact-link-row:focus-visible {
    padding-left: 8px;
  }
  .contact-link-row__type {
    grid-area: type;
  }
  .contact-link-row__content {
    grid-area: content;
  }
  .contact-link-row > i {
    grid-area: arrow;
  }
  .contact-link-row__content strong {
    font-size: clamp(1.4rem, 7vw, 1.85rem);
  }
  .contact-social {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .contact-social__label {
    padding-top: 0;
  }
  .contact-social__links {
    display: grid;
    grid-template-columns: 1fr;
  }
  .contact-social__links a {
    min-width: 0;
    width: 100%;
  }
}
.puzzle-copy span {
  font-size: clamp(.66rem, 2vw, 1.05rem);
  font-weight: 700;
  text-shadow: 0px 0px 1px rgb(0, 0, 0),
    0px 0px 2px rgb(0, 0, 0);
}
.puzzle-copy p {
  font-size: clamp(.76rem, 2vw, 1.14rem);
  font-weight: 600;
  line-height: 1.38;
  text-shadow: 0px 0px 1px rgb(0, 0, 0),
    0px 0px 2px rgb(0, 0, 0),
    0px 0px 3px rgb(0, 0, 0);
}

/* Puhelimessa tekstikoko säilyy luettavana leveydestä riippumatta. */
@media (max-width: 600px) {
  .entry-puzzle {
    aspect-ratio: 480 / 1620;
    min-height: 1350px;
  }
  .puzzle-copy {
    width: 82%;
    justify-content: flex-start;
    gap: 12px;
  }
  .work-copy {
    top: 4.111%;
    height: 20.556%;
  }
  .projects-copy {
    top: 56.333%;
    height: 20.556%;
  }
  .about-copy {
    top: 83.111%;
    height: 14%;
  }
  .think-copy {
    top: 28.333%;
    height: 22.778%;
  }
  .puzzle-copy small {
    margin-top: 0;
    font-size: .875rem;
    line-height: 1.4;
    letter-spacing: .06em;
  }
  .puzzle-copy h3 {
    font-size: clamp(1.75rem, 7.8vw, 2.25rem);
    line-height: 1.08;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
    hyphens: manual;
  }
  .puzzle-copy p {
    font-size: 1.125rem;
    line-height: 1.45;
    font-weight: 500;
  }
  .puzzle-copy span {
    margin-top: auto;
    font-size: 1rem;
    line-height: 1.5;
  }
}
@media (max-width: 360px) {
  .entry-puzzle {
    min-height: 1485px;
  }
  .think-copy {
    top: 27.778%;
    height: 23.889%;
  }
}

#article-writer {
  margin-top: 14px;
  margin-bottom: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
}

#objective-article-title,
#game-article-title {
margin-bottom:0px;

}

/* Esittelyn roolit: paperijulisteet samalla seinäpinnalla kuin hero. */
.page-work .role-wall {
  padding: clamp(16px, 2.8vw, 34px);
  border: 1px solid var(--line);
  background: linear-gradient(rgba(11, 52, 59, .16), rgba(11, 52, 59, .16)),
    url("images/hero-work.jpg") center / cover;
}
.page-work .role-wall .showcase-card {
  --role-color: #ac7729;
  min-width: 0;
  min-height: 320px;
  gap: 20px;
  justify-content: flex-start;
  padding: clamp(22px, 2.7vw, 32px);
  border: 1px solid rgba(22, 23, 23, .5);
  border-top: 7px solid var(--role-color);
  background: linear-gradient(135deg, #fffaf0, #f1e7d3);
  box-shadow: 3px 5px 10px rgba(11, 24, 28, .28);
  transition: transform .2s, box-shadow .2s;
}
.page-work .role-wall .showcase-card:nth-child(2) { --role-color: #527365; }
.page-work .role-wall .showcase-card:nth-child(3) { --role-color: #81718f; }
.page-work .role-wall .showcase-card:nth-child(4) { --role-color: #ae6551; }
.page-work .role-wall .showcase-card:nth-child(5) { --role-color: #a88d50; }
.page-work .role-wall .tag {
  align-self: flex-start;
  max-width: 100%;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--role-color);
  background: none;
  line-height: 1.5;
}
.page-work .role-wall .showcase-card h3 {
  margin: 0;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: normal;
}
.page-work .role-wall .showcase-card p {
  max-width: 44ch;
  margin: 0;
  font-weight: 500;
  line-height: 1.65;
}
.page-work .role-wall .showcase-card a {
  margin-top: auto;
  padding-top: 8px;
  font-size: .93rem;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.page-work .role-wall .showcase-card:hover,
.page-work .role-wall .showcase-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 4px 8px 14px rgba(11, 24, 28, .32);
}
.page-work .role-wall a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
/* Yksi jatkolinkki pitää opettajaosion lopun kevyenä. */
.page-work .teacher-section .section-more-grid { grid-template-columns: 1fr; }
.page-work .teacher-portfolio__footer a { white-space: normal; line-height: 1.4; }
@media (max-width: 600px) {
  .page-work .role-wall { padding: 14px; }
  .page-work .role-wall .showcase-card { min-height: 0; gap: 18px; }
  .page-work .role-wall .showcase-card h3 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .page-work .role-wall .showcase-card { transition: none; }
  .page-work .role-wall .showcase-card:hover,
  .page-work .role-wall .showcase-card:focus-within { transform: none; }
}

/* Pitkien sivujen avattava sisällysluettelo. */
[data-toc-label] {
  scroll-margin-top: 100px;
}
.page-toc-trigger {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 .9rem/1.3 Manrope, Arial, sans-serif;
  cursor: pointer;
}
.page-toc-trigger svg,
.page-toc-panel__close svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.page-toc-trigger:hover {
  background: var(--sun);
}
.page-toc-trigger:focus-visible,
.page-toc-panel a:focus-visible,
.page-toc-panel__close:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 4px;
}
.page-toc-is-open,
.page-toc-is-open body {
  overflow: hidden;
}
.page-toc-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(450px, 94vw);
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: -12px 0 40px rgb(0 0 0 / .18);
}
.page-toc-panel[open] {
  display: flex;
  flex-direction: column;
}
.page-toc-panel::backdrop {
  background: rgb(8 32 39 / .5);
}
.page-toc-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) 24px 22px;
  border-bottom: 2px solid var(--ink);
}
.page-toc-panel__page {
  margin: 0 0 10px;
  font: 500 .75rem/1.5 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-toc-panel h2 {
  margin: 0;
  font: 700 2rem/1.05 Fraunces, serif;
  letter-spacing: -.03em;
}
.page-toc-panel__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.page-toc-panel__close:hover {
  background: var(--sun);
}
.page-toc-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px max(32px, env(safe-area-inset-bottom));
}
.page-toc-panel__group-label {
  margin: 0 0 12px;
  font: 600 .75rem/1.4 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.page-toc-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px;
  color: var(--ink);
  text-decoration: none;
  font: 600 .95rem/1.4 Manrope, Arial, sans-serif;
}
.page-toc-panel a:hover {
  background: rgb(20 88 100 / .09);
}
.page-toc-panel__pages {
  display: grid;
  gap: 8px;
}
.page-toc-panel__site-link {
  border: 1px solid rgb(22 23 23 / .35);
}
.page-toc-panel__swatch {
  width: 16px;
  height: 24px;
  flex: 0 0 16px;
  border: 1px solid var(--ink);
  clip-path: polygon(0 0, 100% 4%, 90% 50%, 100% 96%, 0 100%, 8% 45%);
  background: var(--page-color);
}
.page-toc-panel__arrow {
  margin-left: auto;
}
.page-toc-panel__here {
  margin-left: auto;
  font: 500 .61rem/1.4 'DM Mono', monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-toc-panel a[aria-current="page"] {
  border: 2px solid var(--ink);
  background: #dcd3ee;
  box-shadow: 3px 3px 0 var(--ink);
}
.page-toc-panel__sections[hidden] {
  display: none;
}
.page-toc-panel__section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
.page-toc-panel__section-heading .page-toc-panel__group-label {
  margin: 0;
}
.page-toc-panel__current-page {
  font: 600 .75rem/1.5 Manrope, Arial, sans-serif;
  text-align: right;
  opacity: .7;
}
.page-toc-panel ol {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.page-toc-panel li + li {
  border-top: 1px solid rgb(22 23 23 / .18);
}
.page-toc-panel__number {
  flex: 0 0 22px;
  font: 500 .72rem/1.5 'DM Mono', monospace;
  opacity: .65;
}
.page-toc-panel a[aria-current="location"] {
  background: var(--petrol);
  color: var(--cream);
}
@media (max-width: 760px) {
  .page-toc-trigger {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 11px 15px;
  }
  .page-toc-panel__header {
    align-items: center;
    padding: max(16px, env(safe-area-inset-top)) 18px 14px;
  }
  .page-toc-panel__page {
    margin-bottom: 5px;
    font-size: .65rem;
  }
  .page-toc-panel h2 {
    font-size: 1.8rem;
  }
  .page-toc-panel__body {
    padding: 16px 16px max(24px, env(safe-area-inset-bottom));
  }
  .page-toc-panel__pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .page-toc-panel .page-toc-panel__site-link {
    min-height: 44px;
    padding: 9px 10px;
    gap: 8px;
    font-size: .85rem;
    overflow-wrap: anywhere;
  }
  .page-toc-panel__swatch {
    width: 10px;
    height: 18px;
    flex-basis: 10px;
  }
  .page-toc-panel__arrow,
  .page-toc-panel__here {
    display: none;
  }
  .page-toc-panel__section-heading {
    margin-top: 20px;
    padding-top: 18px;
  }
  .page-toc-panel__sections a {
    min-height: 44px;
    padding: 11px 10px;
  }
  [data-toc-label] {
    scroll-margin-top: 88px;
  }
}