/*
* Hadiro global stylesheet
* 01 Tokens · 02 Base · 03 Shared blocks · 04–11 Components · Responsive rules
* BEM: block__element--modifier. Behavior hooks live in data-* attributes.
* All design values are declared on :root; component rules consume tokens.
* See CSS_ARCHITECTURE.md for ownership, tokens and breakpoint conventions.
*/

:root {
  /* Semantic palette, font stacks and document settings */
  --site-header-height: 4.375rem;
  --color-ink: #252723;
  --color-muted: #74756a;
  --color-cream: #f4efe6;
  --color-paper: #fbf9f4;
  --color-sage: #7f8d75;
  --color-sage-dark: #4e5d4d;
  --color-terracotta: #ba6548;
  --color-ochre: #c49b57;
  --color-border: rgba(37, 39, 35, .15);
  --shadow-artwork: 0 22px 70px rgba(46, 39, 28, .15);
  --font-family-display: Georgia, 'Times New Roman', serif;
  --font-family-body: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --header-height-tablet: 4.8125rem;
  --header-height-mobile: 4.5625rem;
  --page-scroll-offset: 0px;
  --color-header: rgba(251, 249, 244, .96);
  --color-header-border: rgba(37, 39, 35, .08);
  --color-header-scrolled: rgba(251, 249, 244, .99);
  --color-header-shadow: rgba(37, 39, 35, .1);
  --color-white: #fff;
  --color-button-light: #e9dfd0;
  --color-hero-label-surface: rgba(37, 39, 35, .9);
  --color-hero-label: #d8c49e;
  --color-intro-kicker: #d9c99d;
  --color-card-placeholder: #ddd;
  --color-frame: #805536;
  --color-frame-highlight: #b47b4f;
  --color-frame-shadow: #5a3828;
  --color-frame-drop-shadow: rgba(55, 35, 22, .18);
  --color-card-overlay: rgba(0,0,0,.75);
  --color-card-category: #e7c98c;
  --color-inverse-muted: #b6b9ae;
  --color-process-eyebrow: #d8b879;
  --color-process-caption: #c8c7ba;
  --color-video-surface: #eee8dc;
  --color-paper-shadow: rgba(45, 39, 30, .08);
  --color-workshop-eyebrow: #f0d39c;
  --color-workshop-border: rgba(255,255,255,.27);
  --color-workshop-label: #f4d297;
  --color-workshop-text: #f9eee1;
  --color-button-outline: rgba(255,255,255,.65);
  --color-workshop-hero-text: #e8e5d8;
  --color-workshop-badge-border: rgba(255,255,255,.35);
  --color-workshop-badge: #e8d5a5;
  --color-proof-caption: #ded8c5;
  --color-workshop-contact: #fff1d5;
  --color-footer-text: #b8b9ae;
  --color-lightbox-backdrop: rgba(31, 37, 31, .94);
  --color-lightbox-stage: #e4ded2;
  --color-lightbox-button-border: rgba(37,39,35,.2);
  --color-lightbox-step: rgba(251,249,244,.9);
  --color-lightbox-close: rgba(251,249,244,.95);

  /* Shared dimensions, motion, and component geometry */
  --line-height-body: 1.55;
  --layer-texture: 10;
  --grain-opacity: .05;
  --grain-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  --container-max-width: 1180px;
  --container-gutter-desktop: 64px;
  --container-width: min(var(--container-max-width), calc(100% - var(--container-gutter-desktop)));
  --layer-header: 30;
  --size-rem-1-125: 1.125rem;
  --size-rem-2: 2rem;
  --size-rem-82-5: 82.5rem;
  --size-1: 1px;
  --size-18: 18px;
  --duration-fast: .2s;
  --size-8: 8px;
  --size-24: 24px;
  --shadow-header: 0 var(--size-8) var(--size-24) var(--color-header-shadow);
  --measure-em-negative-0-06: -.06em;
  --size-25: 25px;
  --size-rem-0-76: .76rem;
  --measure-em-0-08: .08em;
  --size-7: 7px;
  --size-10: 10px;
  --size-rem-0-72: .72rem;
  --size-2: 2px;
  --size-4: 4px;
  --viewport-vh-100: 100vh;
  --hero-height: calc(var(--viewport-vh-100) - var(--site-header-height));
  --viewport-svh-100: 100svh;
  --hero-height-2: calc(var(--viewport-svh-100) - var(--site-header-height));
  --hero-grid-template-columns: .9fr 1.1fr;
  --viewport-vw-7: 7vw;
  --size-16: 16px;
  --size-rem-0-7: .7rem;
  --font-weight-bold: 700;
  --measure-em-0-16: .16em;
  --font-weight-regular: 400;
  --line-height-heading: .98;
  --measure-em-negative-0-055: -.055em;
  --size-570: 570px;
  --size-rem-1-75: 1.75rem;
  --size-rem-3: 3rem;
  --viewport-svh-9: 9svh;
  --size-rem-7-6: 7.6rem;
  --font-size-heading-1: clamp(var(--size-rem-3), var(--viewport-svh-9), var(--size-rem-7-6));
  --size-rem-2-8: 2.8rem;
  --viewport-vw-5: 5vw;
  --size-rem-5-4: 5.4rem;
  --font-size-heading-2: clamp(var(--size-rem-2-8), var(--viewport-vw-5), var(--size-rem-5-4));
  --line-height-subheading: 1.1;
  --size-440: 440px;
  --size-rem-1-05: 1.05rem;
  --size-26: 26px;
  --size-34: 34px;
  --size-14: 14px;
  --size-19: 19px;
  --size-negative-2: -2px;
  --button-hover-transform: translateY(var(--size-negative-2));
  --size-rem-0-78: .78rem;
  --angle-2: 2deg;
  --hero-art-transform: rotate(var(--angle-2));
  --duration-slow: .4s;
  --hero-art-hover-transform: rotate(0) scale(1.015);
  --percent-8: 8%;
  --percent-5: 5%;
  --percent-2: 2%;
  --percent-negative-9: -9%;
  --angle-negative-6: -6deg;
  --hero-art-before-transform: rotate(var(--angle-negative-6));
  --percent-87: 87%;
  --percent-9: 9%;
  --size-3: 3px;
  --size-235: 235px;
  --size-15: 15px;
  --size-rem-0-68: .68rem;
  --measure-em-0-12: .12em;
  --size-rem-1-2: 1.2rem;
  --size-73: 73px;
  --intro-grid-grid-template-columns: 1fr 2fr;
  --viewport-vw-8: 8vw;
  --measure-em-0-15: .15em;
  --size-760: 760px;
  --size-rem-1-9: 1.9rem;
  --viewport-vw-3: 3vw;
  --intro-statement-font-size: clamp(var(--size-rem-1-9), var(--viewport-vw-3), var(--size-rem-3));
  --intro-statement-line-height: 1.07;
  --size-135: 135px;
  --size-rem-3-4375: 3.4375rem;
  --size-720: 720px;
  --size-30: 30px;
  --size-320: 320px;
  --size-12: 12px;
  --size-rem-0-9: .9rem;
  --about-grid-grid-template-columns: .7fr 1.3fr;
  --size-rem-27-5: 27.5rem;
  --about-image-height: min(var(--size-rem-27-5), calc(var(--viewport-svh-100) - var(--site-header-height) - var(--size-rem-3)));
  --about-image-filter: saturate(.85);
  --size-640: 640px;
  --size-rem-1-25: 1.25rem;
  --size-rem-0-875: .875rem;
  --size-rem-2-2: 2.2rem;
  --viewport-svh-6-5: 6.5svh;
  --size-rem-4: 4rem;
  --about-copy-section-heading-title-font-size: clamp(var(--size-rem-2-2), var(--viewport-svh-6-5), var(--size-rem-4));
  --size-rem-1: 1rem;
  --size-rem-1-35: 1.35rem;
  --viewport-vw-1-85: 1.85vw;
  --about-copy-about-lead-font-size: clamp(var(--size-rem-1-35), var(--viewport-vw-1-85), var(--size-rem-1-9));
  --about-copy-about-lead-line-height: 1.2;
  --size-36: 36px;
  --credentials-item-grid-template-columns: var(--size-135) 1fr;
  --size-rem-0-86: .86rem;
  --measure-em-0-1: .1em;
  --size-negative-20: -20px;
  --size-38: 38px;
  --works-grid-grid-template-columns: repeat(4, 1fr);
  --size-305: 305px;
  --work-card-wide-grid-column: span 2;
  --duration-image: .5s;
  --work-card-hover-work-card-image-transform: scale(1.055);
  --work-card-hover-work-card-image-filter: saturate(1.15);
  --size-6: 6px;
  --size-28: 28px;
  --work-card-framed-box-shadow: inset 0 0 0 var(--size-3) var(--color-frame-highlight), inset 0 0 0 var(--size-6) var(--color-frame-shadow), 0 var(--size-12) var(--size-28) var(--color-frame-drop-shadow);
  --work-card-framed-work-card-image-height: calc(100% - var(--size-24));
  --size-281: 281px;
  --work-card-framed-work-card-image-transform: scale(1.02);
  --work-card-framed-hover-work-card-image-transform: scale(1.04);
  --percent-48: 48%;
  --percent-45: 45%;
  --work-card-after-background: linear-gradient(transparent, var(--color-card-overlay));
  --size-20: 20px;
  --size-17: 17px;
  --size-rem-0-66: .66rem;
  --size-rem-1-32: 1.32rem;
  --work-card-title-line-height: 1.05;
  --work-card-object-work-card-image-filter: saturate(.9);
  --size-rem-1-08: 1.08rem;
  --viewport-vw-1-55: 1.55vw;
  --size-rem-1-42: 1.42rem;
  --work-card-digital-work-card-title-font-size: clamp(var(--size-rem-1-08), var(--viewport-vw-1-55), var(--size-rem-1-42));
  --size-130: 130px;
  --process-grid-grid-template-columns: repeat(6, 1fr);
  --size-245: 245px;
  --process-card-image-filter: saturate(.8);
  --duration-gentle: .35s;
  --size-negative-7: -7px;
  --process-card-hover-process-card-image-transform: translateY(var(--size-negative-7));
  --process-card-hover-process-card-image-filter: saturate(1.2);
  --size-115: 115px;
  --size-rem-1-55: 1.55rem;
  --size-rem-0-88: .88rem;
  --videos-grid-grid-template-columns: repeat(2, 1fr);
  --size-40: 40px;
  --video-card-box-shadow: 0 var(--size-12) var(--size-40) var(--color-paper-shadow);
  --size-rem-1-7: 1.7rem;
  --size-125: 125px;
  --workshop-grid-grid-template-columns: 1.1fr .9fr;
  --viewport-vw-10: 10vw;
  --size-650: 650px;
  --size-600: 600px;
  --workshop-lead-line-height: 1.15;
  --size-105: 105px;
  --size-95: 95px;
  --workshop-hero-grid-grid-template-columns: 1.15fr .85fr;
  --size-800: 800px;
  --size-22: 22px;
  --size-rem-3-5: 3.5rem;
  --viewport-vw-6: 6vw;
  --size-rem-6-8: 6.8rem;
  --workshop-hero-title-font-size: clamp(var(--size-rem-3-5), var(--viewport-vw-6), var(--size-rem-6-8));
  --size-13: 13px;
  --size-110: 110px;
  --proposal-grid-grid-template-columns: 1fr 1fr;
  --size-rem-1-45: 1.45rem;
  --size-rem-0-93: .93rem;
  --size-85: 85px;
  --proposal-week-grid-template-columns: var(--size-85) 1fr;
  --size-rem-1-15: 1.15rem;
  --size-100: 100px;
  --workshop-hero-grid-grid-template-columns-2: minmax(0, 1fr);
  --size-rem-1-5: 1.5rem;
  --size-rem-5-5: 5.5rem;
  --proposal-padding-block: clamp(var(--size-rem-4), var(--viewport-svh-9), var(--size-rem-5-5));
  --size-140: 140px;
  --size-155: 155px;
  --size-780: 780px;
  --size-rem-1-4: 1.4rem;
  --size-rem-2-5: 2.5rem;
  --contact-link-font-size: clamp(var(--size-rem-1-4), var(--viewport-vw-3), var(--size-rem-2-5));
  --size-rem-0-75: .75rem;
  --size-45: 45px;
  --size-rem-0-85: .85rem;
  --artwork-index-list-columns: 3;
  --size-70: 70px;
  --size-1080: 1080px;
  --size-900: 900px;
  --size-rem-2-7: 2.7rem;
  --size-rem-5-8: 5.8rem;
  --artwork-title-font-size: clamp(var(--size-rem-2-7), var(--viewport-vw-6), var(--size-rem-5-8));
  --size-rem-0-8: .8rem;
  --size-32: 32px;
  --viewport-svh-78: 78svh;
  --viewport-svh-85: 85svh;
  --size-rem-2-3: 2.3rem;
  --size-rem-0-65: .65rem;
  --layer-dialog: 50;
  --viewport-vw-100: 100vw;
  --viewport-dvh-100: 100dvh;
  --duration-normal: .25s;
  --size-300: 300px;
  --size-370: 370px;
  --lightbox-panel-grid-template-columns: minmax(0, 1fr) minmax(var(--size-300), var(--size-370));
  --lightbox-panel-sculpture-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  --lightbox-stage-grid-template-rows: minmax(0, 1fr) auto;
  --viewport-vw-2-5: 2.5vw;
  --lightbox-stage-padding: clamp(var(--size-16), var(--viewport-vw-2-5), var(--size-38));
  --measure-em-1-5: 1.5em;
  --percent-50: 50%;
  --size-44: 44px;
  --size-rem-1-8: 1.8rem;
  --percent-negative-50: -50%;
  --lightbox-step-transform: translateY(var(--percent-negative-50));
  --size-46: 46px;
  --lightbox-copy-padding: clamp(var(--size-24), var(--viewport-vw-3), var(--size-46));
  --viewport-vh-5: 5vh;
  --size-rem-3-7: 3.7rem;
  --lightbox-title-font-size: clamp(var(--size-rem-1-8), var(--viewport-vh-5), var(--size-rem-3-7));
  --size-42: 42px;
  --viewport-vw-4-5: 4.5vw;
  --proposal-paper-title-font-size: clamp(var(--size-rem-2), var(--viewport-vw-4-5), var(--size-rem-2-8));
  --viewport-svh-10: 10svh;
  --size-rem-6-5: 6.5rem;
  --workshop-hero-padding-block: clamp(var(--size-rem-4), var(--viewport-svh-10), var(--size-rem-6-5));
  --viewport-svh-8: 8svh;
  --size-rem-6-2: 6.2rem;
  --workshop-hero-title-font-size-2: clamp(var(--size-rem-2-8), var(--viewport-svh-8), var(--size-rem-6-2));
  --site-nav-top: calc(100% + var(--size-8));
  --site-nav-width: min(var(--size-320), calc(var(--viewport-vw-100) - var(--size-36)));
  --hero-grid-template-columns-2: 1fr;
  --size-rem-22: 22rem;
  --viewport-svh-48: 48svh;
  --hero-rows-tablet: auto minmax(var(--size-rem-22), var(--viewport-svh-48));
  --viewport-svh-3: 3svh;
  --hero-gap: clamp(var(--size-rem-1), var(--viewport-svh-3), var(--size-rem-2));
  --size-700: 700px;
  --hero-art-width: min(var(--size-700), 100%);
  --viewport-svh-6: 6svh;
  --about-grid-gap: clamp(var(--size-rem-2), var(--viewport-svh-6), var(--size-rem-3-5));
  --size-500: 500px;
  --works-grid-grid-template-columns-2: repeat(3, 1fr);
  --container-width-2: min(100% - var(--size-36), var(--container-max-width));
  --size-rem-16: 16rem;
  --viewport-svh-45: 45svh;
  --hero-rows-mobile: auto minmax(var(--size-rem-16), var(--viewport-svh-45));
  --size-rem-2-15: 2.15rem;
  --size-rem-3-8: 3.8rem;
  --font-size-heading-1-mobile: clamp(var(--size-rem-2-15), var(--viewport-svh-8), var(--size-rem-3-8));
  --size-negative-1: -1px;
  --size-rem-21-25: 21.25rem;
  --about-image-height-mobile: min(var(--size-rem-21-25), calc(var(--viewport-svh-100) - var(--site-header-height) - var(--size-rem-3)));
  --credentials-item-grid-template-columns-2: var(--size-105) 1fr;
  --size-220: 220px;
  --size-88: 88px;
  --size-190: 190px;
  --contact-padding-block: clamp(var(--size-rem-4), var(--viewport-svh-9), var(--size-rem-6-5));
  --viewport-vw-11: 11vw;
  --workshop-hero-title-font-size-3: clamp(var(--size-rem-2-5), var(--viewport-vw-11), var(--size-rem-4));
  --size-rem-5: 5rem;
  --proposal-week-grid-template-columns-2: minmax(var(--size-rem-4), var(--size-rem-5)) minmax(0, 1fr);
  --size-52: 52px;
  --size-rem-0-62: .62rem;
  --lightbox-title-font-size-2: clamp(var(--size-rem-1-55), var(--viewport-vw-6), var(--size-rem-2-3));
  --size-rem-0-82: .82rem;
  --lightbox-description-line-height: 1.35;
  --size-5: 5px;
  --size-rem-0-6: .6rem;
  --container-width-3: min(100% - var(--size-rem-2), var(--container-max-width));
  --size-rem-14: 14rem;
  --viewport-svh-42: 42svh;
  --hero-rows-compact: auto minmax(var(--size-rem-14), var(--viewport-svh-42));
  --font-size-heading-1-compact: clamp(var(--size-rem-2), var(--viewport-svh-8), var(--size-rem-3));
  --percent-85: 85%;
  --section-heading-title-font-size: clamp(var(--size-rem-2), var(--viewport-vw-8), var(--size-rem-3));
  --size-rem-18: 18rem;
  --about-image-height-compact: min(var(--size-rem-18), calc(var(--viewport-svh-100) - var(--site-header-height) - var(--size-rem-3)));
  --size-rem-0-5: .5rem;
  --size-rem-11-5: 11.5rem;
  --size-rem-10: 10rem;
  --size-rem-0-95: .95rem;
  --proposal-paper-title-font-size-2: clamp(var(--size-rem-1-8), var(--viewport-vw-8), var(--size-rem-2-5));
  --size-rem-4-25: 4.25rem;
  --proposal-week-grid-template-columns-3: var(--size-rem-4-25) minmax(0, 1fr);
  --size-rem-1-1: 1.1rem;
  --contact-link-font-size-2: clamp(var(--size-rem-1-1), var(--viewport-vw-5), var(--size-rem-1-5));
  --size-rem-4-5: 4.5rem;
  --font-size-heading-1-short: clamp(var(--size-rem-2-8), var(--viewport-svh-8), var(--size-rem-4-5));
  --hero-image-max-height: calc(var(--viewport-svh-100) - var(--site-header-height) - var(--size-rem-1));
  --size-rem-24: 24rem;
  --about-image-height-short: min(var(--size-rem-24), calc(var(--viewport-svh-100) - var(--site-header-height) - var(--size-rem-2)));
}

/* 02. Base: document defaults and intrinsic media */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

html.document--restore-scroll {
  scroll-behavior: auto;
}

.page--modal-open {
  top: var(--page-scroll-offset);
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

button, a {
  font: inherit;
}

button {
  color: inherit;
}

button, .work-card, .process-card, .hero__art {
  cursor: pointer;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--measure-em-negative-0-055);
}

h1 {
  max-width: var(--size-570);
  margin-bottom: var(--size-rem-1-75);
  font-size: var(--font-size-heading-1);
}

h2 {
  margin-bottom: var(--size-24);
  font-size: var(--font-size-heading-2);
}

h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-subheading);
}

section {
  position: relative;
}

main[id], section[id] {
  scroll-margin-top: var(--site-header-height);
}

/* 03. Shared blocks: grain, container, typography, buttons */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--layer-texture);
  opacity: var(--grain-opacity);
  background-image: var(--grain-background-image);
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 var(--size-16);
  color: var(--color-terracotta);
  font-size: var(--size-rem-0-7);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--measure-em-0-16);
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-14) var(--size-19);
  letter-spacing: var(--measure-em-0-08);
  font-size: var(--size-rem-0-72);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}

.button:hover {
  transform: var(--button-hover-transform);
}

.button--dark {
  color: var(--color-white);
  background: var(--color-ink);
}

.button--light {
  color: var(--color-ink);
  background: var(--color-button-light);
}

.button--outline-light {
  border: var(--size-1) solid var(--color-button-outline);
  color: var(--color-white);
}

.text-link {
  color: var(--color-sage-dark);
  font-size: var(--size-rem-0-78);
  font-weight: var(--font-weight-bold);
}

.section-heading {
  margin-bottom: var(--size-rem-3-4375);
}

.section-heading__title {
  max-width: var(--size-720);
}

.section-heading--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--size-30);
}

.section-heading__note {
  max-width: var(--size-320);
  margin: 0 0 var(--size-12);
  color: var(--color-muted);
  font-size: var(--size-rem-0-9);
}

/* 04. Site header, brand and navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--site-header-height);
  margin: 0;
  padding: var(--size-rem-1-125) max(var(--size-rem-2), calc((100% - var(--size-rem-82-5)) / 2));
  background: var(--color-header);
  border-bottom: var(--size-1) solid var(--color-header-border);
  backdrop-filter: blur(var(--size-18));
  transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.site-header--scrolled {
  background: var(--color-header-scrolled);
  box-shadow: var(--shadow-header);
}

.brand {
  flex: 0 0 auto;
  font-family: var(--font-family-display);
  font-size: var(--size-rem-2);
  line-height: 1;
  letter-spacing: var(--measure-em-negative-0-06);
}

.brand__accent {
  color: var(--color-terracotta);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--size-25);
  font-size: var(--size-rem-0-76);
  letter-spacing: var(--measure-em-0-08);
  text-transform: uppercase;
}

.site-nav__link {
  color: var(--color-muted);
  transition: color var(--duration-fast) ease;
}

.site-nav__link:hover {
  color: var(--color-ink);
}

.site-nav__language-toggle, .site-header__menu-toggle, .language-switch {
  border: var(--size-1) solid var(--color-ink);
  background: transparent;
  padding: var(--size-7) var(--size-10);
  cursor: pointer;
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-08);
}

.site-header__menu-toggle {
  display: none;
}

.site-header__link:focus-visible, .site-header__control:focus-visible {
  outline: var(--size-2) solid var(--color-terracotta);
  outline-offset: var(--size-4);
}

/* 05. Portfolio hero */
.hero {
  height: var(--hero-height);
  height: var(--hero-height-2);
  min-height: 0;
  display: grid;
  grid-template-columns: var(--hero-grid-template-columns);
  align-items: center;
  gap: var(--viewport-vw-7);
  padding: 0;
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.hero__text, .workshop-hero__text {
  max-width: var(--size-440);
  color: var(--color-muted);
  font-size: var(--size-rem-1-05);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--size-26);
  flex-wrap: wrap;
  margin-top: var(--size-34);
}

.hero__art {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  transform: var(--hero-art-transform);
  transition: transform var(--duration-slow) ease;
}

.hero__art:hover {
  transform: var(--hero-art-hover-transform);
}

.hero__art::before {
  content: '';
  position: absolute;
  inset: var(--percent-8) var(--percent-5) var(--percent-2) var(--percent-negative-9);
  background: var(--color-sage);
  transform: var(--hero-art-before-transform);
}

.hero__image {
  position: relative;
  width: var(--percent-87);
  height: 100%;
  max-height: var(--viewport-svh-100);
  margin-left: auto;
  object-fit: contain;
  box-shadow: var(--shadow-artwork);
}

.hero__label {
  position: absolute;
  right: 0;
  bottom: var(--percent-9);
  display: grid;
  gap: var(--size-3);
  min-width: var(--size-235);
  padding: var(--size-15) var(--size-19);
  color: var(--color-white);
  background: var(--color-hero-label-surface);
}

.hero__category {
  color: var(--color-hero-label);
  font-size: var(--size-rem-0-68);
  letter-spacing: var(--measure-em-0-12);
  text-transform: uppercase;
}

.hero__art-title {
  font-family: var(--font-family-display);
  font-size: var(--size-rem-1-2);
  font-weight: var(--font-weight-regular);
}

/* 06. Intro and about */
.intro {
  padding: var(--size-73) 0;
  color: var(--color-white);
  background: var(--color-sage-dark);
}

.intro__grid {
  display: grid;
  grid-template-columns: var(--intro-grid-grid-template-columns);
  gap: var(--viewport-vw-8);
  align-items: start;
}

.intro .intro__kicker {
  margin: var(--size-4) 0;
  color: var(--color-intro-kicker);
  font-size: var(--size-rem-0-7);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--measure-em-0-15);
  text-transform: uppercase;
}

.intro__statement {
  max-width: var(--size-760);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--intro-statement-font-size);
  line-height: var(--intro-statement-line-height);
}

.about {
  min-height: var(--hero-height-2);
  padding-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.works, .videos {
  padding-top: var(--size-135);
  padding-bottom: var(--size-135);
}

.about__grid {
  display: grid;
  grid-template-columns: var(--about-grid-grid-template-columns);
  gap: var(--viewport-vw-5);
  align-items: center;
}

.about__portrait {
  padding: var(--size-18) var(--size-18) 0 0;
  background: var(--color-ochre);
}

.about__image {
  width: 100%;
  height: var(--about-image-height);
  object-fit: contain;
  object-position: center top;
  filter: var(--about-image-filter);
}

.about__copy {
  max-width: var(--size-640);
}

.about__copy .section-heading {
  margin-bottom: var(--size-rem-1-25);
}

.about__copy .section-heading__title {
  margin-bottom: var(--size-rem-0-875);
  font-size: var(--about-copy-section-heading-title-font-size);
}

.about__copy .about__lead {
  margin-bottom: var(--size-rem-1);
  color: var(--color-sage-dark);
  font-family: var(--font-family-display);
  font-size: var(--about-copy-about-lead-font-size);
  line-height: var(--about-copy-about-lead-line-height);
}

.about__paragraph:last-child {
  margin-bottom: 0;
}

.about__paragraph:not(.about__lead) {
  color: var(--color-muted);
}

.credentials, .detail-list {
  display: grid;
  gap: var(--size-18);
  margin-top: var(--size-36);
}

.credentials__item, .detail-list__item {
  display: grid;
  grid-template-columns: var(--credentials-item-grid-template-columns);
  gap: var(--size-18);
  padding-top: var(--size-15);
  border-top: var(--size-1) solid var(--color-border);
  font-size: var(--size-rem-0-86);
}

.detail-list__label {
  color: var(--color-terracotta);
  font-size: var(--size-rem-0-68);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--measure-em-0-1);
  text-transform: uppercase;
}

/* 07. Work filtering and artwork cards */
.work-filter {
  display: flex;
  gap: var(--size-8);
  margin: var(--size-negative-20) 0 var(--size-38);
  flex-wrap: wrap;
}

.work-filter__button {
  border: var(--size-1) solid var(--color-border);
  padding: var(--size-10) var(--size-14);
  color: var(--color-muted);
  background: transparent;
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-08);
  text-transform: uppercase;
}

.work-filter__button--active, .work-filter__button:hover {
  border-color: var(--color-ink);
  color: var(--color-paper);
  background: var(--color-ink);
}

.work-filter__button:focus-visible, .lightbox button:focus-visible {
  outline: var(--size-2) solid var(--color-terracotta);
  outline-offset: var(--size-3);
}

.works__grid {
  display: grid;
  grid-template-columns: var(--works-grid-grid-template-columns);
  gap: var(--size-18);
}

.work-card[hidden] {
  display: none !important;
}

.work-card {
  position: relative;
  min-height: var(--size-305);
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--color-card-placeholder);
  text-align: left;
}

.work-card--wide, .work-card--featured {
  grid-column: var(--work-card-wide-grid-column);
}

.work-card__image {
  width: 100%;
  height: 100%;
  min-height: var(--size-305);
  object-fit: cover;
  transition: transform var(--duration-image) ease, filter var(--duration-image) ease;
}

.work-card:hover .work-card__image {
  transform: var(--work-card-hover-work-card-image-transform);
  filter: var(--work-card-hover-work-card-image-filter);
}

.work-card--framed {
  border: var(--size-12) solid var(--color-frame);
  background: var(--color-frame);
  box-shadow: var(--work-card-framed-box-shadow);
}

.work-card--framed .work-card__image {
  height: var(--work-card-framed-work-card-image-height);
  min-height: var(--size-281);
  object-fit: cover;
  object-position: center center;
  transform: var(--work-card-framed-work-card-image-transform);
}

.work-card--framed:hover .work-card__image {
  transform: var(--work-card-framed-hover-work-card-image-transform);
}

.work-card--framed {
  isolation: isolate;
}

.work-card--framed::after {
  inset: var(--percent-48) var(--size-12) var(--size-12);
}

.work-card::after {
  content: '';
  position: absolute;
  inset: var(--percent-45) 0 0;
  background: var(--work-card-after-background);
}

.work-card__info {
  position: absolute;
  z-index: 1;
  left: var(--size-20);
  right: var(--size-20);
  bottom: var(--size-17);
  display: grid;
  gap: var(--size-3);
  color: var(--color-white);
}

.work-card__category {
  color: var(--color-card-category);
  font-size: var(--size-rem-0-66);
  letter-spacing: var(--measure-em-0-1);
  text-transform: uppercase;
}

.work-card__title {
  font-family: var(--font-family-display);
  font-size: var(--size-rem-1-32);
  font-weight: var(--font-weight-regular);
  line-height: var(--work-card-title-line-height);
}

.work-card--object .work-card__image {
  filter: var(--work-card-object-work-card-image-filter);
}

.work-card--digital .work-card__image {
  object-position: center;
}

.work-card--digital .work-card__title {
  font-size: var(--work-card-digital-work-card-title-font-size);
}

/* 08. Process, skills and video cards */
.process {
  padding: var(--size-130) 0;
  color: var(--color-white);
  background: var(--color-ink);
}

.process .section-heading__note {
  color: var(--color-inverse-muted);
}

.process .eyebrow {
  color: var(--color-process-eyebrow);
}

.process-gallery {
  display: grid;
  grid-template-columns: var(--process-grid-grid-template-columns);
  gap: var(--size-14);
}

.process-card {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--color-white);
  background: transparent;
  text-align: left;
}

.process-card__image {
  width: 100%;
  height: var(--size-245);
  object-fit: cover;
  filter: var(--process-card-image-filter);
  transition: transform var(--duration-gentle) ease, filter var(--duration-gentle) ease;
}

.process-card:hover .process-card__image {
  transform: var(--process-card-hover-process-card-image-transform);
  filter: var(--process-card-hover-process-card-image-filter);
}

.process-card__caption {
  display: block;
  padding-top: var(--size-12);
  color: var(--color-process-caption);
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-08);
  text-transform: uppercase;
}

.process-card__label {
  color: var(--color-white);
  font-weight: var(--font-weight-regular);
}

.skills {
  background: var(--color-cream);
}

.skills__inner {
  padding-top: var(--size-115);
  padding-bottom: var(--size-115);
}

.skills__grid {
  display: grid;
  grid-template-columns: var(--works-grid-grid-template-columns);
  gap: var(--size-18);
  margin-bottom: var(--size-30);
}

.skills__item {
  padding: var(--size-20) var(--size-18) var(--size-12);
  border-top: var(--size-1) solid var(--color-border);
}

.skills__number {
  display: inline-block;
  margin-bottom: var(--size-25);
  color: var(--color-terracotta);
  font-size: var(--size-rem-0-68);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--measure-em-0-12);
}

.skills__title {
  margin-bottom: var(--size-12);
  font-size: var(--size-rem-1-55);
}

.skills__description {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: var(--size-rem-0-88);
}

.videos {
  background: var(--color-video-surface);
}

.videos__grid {
  display: grid;
  grid-template-columns: var(--videos-grid-grid-template-columns);
  gap: var(--size-28);
}

.video-card {
  overflow: hidden;
  background: var(--color-paper);
  box-shadow: var(--video-card-box-shadow);
}

.video-card__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--color-ink);
}

.video-card__copy {
  padding: var(--size-24) var(--size-26) var(--size-28);
}

.video-card__title {
  margin-bottom: var(--size-6);
  font-size: var(--size-rem-1-7);
}

.video-card__description:not(.eyebrow) {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--size-rem-0-9);
}

/* 09. Workshop and proposal pages */
.workshop {
  padding: var(--size-125) 0;
  color: var(--color-white);
  background: var(--color-terracotta);
}

.workshop__grid {
  display: grid;
  grid-template-columns: var(--workshop-grid-grid-template-columns);
  gap: var(--viewport-vw-10);
  align-items: center;
}

.workshop .eyebrow {
  color: var(--color-workshop-eyebrow);
}

.workshop__title {
  max-width: var(--size-650);
}

.workshop__lead {
  max-width: var(--size-600);
  font-family: var(--font-family-display);
  font-size: var(--size-rem-1-7);
  line-height: var(--workshop-lead-line-height);
}

.detail-list__item {
  border-color: var(--color-workshop-border);
}

.detail-list .detail-list__label {
  color: var(--color-workshop-label);
}

.detail-list__value {
  color: var(--color-workshop-text);
  font-size: var(--size-rem-0-88);
}

.workshop__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-10);
  padding-top: var(--size-15);
}

.page--workshop {
  background: var(--color-cream);
}

.workshop-hero {
  padding: var(--size-105) 0 var(--size-95);
  color: var(--color-white);
  background: var(--color-sage-dark);
}

.workshop-hero__grid {
  display: grid;
  grid-template-columns: var(--workshop-hero-grid-grid-template-columns);
  gap: var(--viewport-vw-8);
  align-items: end;
}

.workshop-hero__title {
  max-width: var(--size-800);
  margin-bottom: var(--size-22);
  font-size: var(--workshop-hero-title-font-size);
}

.workshop-hero__text {
  color: var(--color-workshop-hero-text);
}

.workshop-hero__badge {
  display: inline-flex;
  padding: var(--size-10) var(--size-13);
  border: var(--size-1) solid var(--color-workshop-badge-border);
  color: var(--color-workshop-badge);
  font-size: var(--size-rem-0-68);
  letter-spacing: var(--measure-em-0-12);
  text-transform: uppercase;
}

.proposal {
  padding: var(--size-110) 0;
}

.proposal__grid {
  display: grid;
  grid-template-columns: var(--proposal-grid-grid-template-columns);
  gap: var(--size-28);
}

.proposal-paper {
  padding: var(--size-34);
  background: var(--color-paper);
  box-shadow: var(--video-card-box-shadow);
}

.proposal-paper__title {
  font-size: var(--size-rem-2-8);
}

.proposal-paper__subtitle {
  margin: var(--size-30) 0 var(--size-8);
  font-size: var(--size-rem-1-45);
}

.proposal-paper__paragraph, .proposal-paper__item {
  color: var(--color-muted);
  font-size: var(--size-rem-0-93);
}

.proposal-paper__list {
  padding-left: var(--size-19);
}

.proposal__timeline {
  display: grid;
  gap: 0;
}

.proposal-week {
  display: grid;
  grid-template-columns: var(--proposal-week-grid-template-columns);
  gap: var(--size-18);
  padding: var(--size-18) 0;
  border-top: var(--size-1) solid var(--color-border);
}

.proposal-week__label {
  color: var(--color-terracotta);
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-08);
  text-transform: uppercase;
}

.proposal-week__description {
  color: var(--color-ink);
  font-family: var(--font-family-display);
  font-size: var(--size-rem-1-15);
}

.workshop-proof {
  padding: var(--size-110) 0;
  color: var(--color-white);
  background: var(--color-ink);
}

.workshop-proof .section-heading__note {
  color: var(--color-inverse-muted);
}

.workshop-proof .process-card__caption {
  color: var(--color-proof-caption);
}

.workshop-contact {
  padding: var(--size-100) 0;
  text-align: center;
  background: var(--color-terracotta);
  color: var(--color-white);
}

.workshop-contact .eyebrow {
  color: var(--color-workshop-eyebrow);
}

.workshop-contact__title {
  max-width: var(--size-760);
  margin-left: auto;
  margin-right: auto;
}

.workshop-contact .contact-link {
  color: var(--color-workshop-contact);
}

@media (max-width: 960px)  {
  .workshop-hero__grid, .proposal__grid {
    grid-template-columns: var(--workshop-hero-grid-grid-template-columns-2);
  }

  .workshop-hero__grid {
    gap: var(--size-rem-2);
  }

  .proposal__grid {
    gap: var(--size-rem-1-5);
  }

}

@media (max-width: 700px)  {
  .proposal, .workshop-proof {
    padding-block: var(--proposal-padding-block);
  }

  .proposal-paper {
    padding: var(--size-rem-1-5);
  }

}

/* 10. Contact, footer, artwork pages and rights */
.contact {
  padding: var(--size-140) 0 var(--size-155);
  text-align: center;
  background: var(--color-paper);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact__title {
  max-width: var(--size-780);
  margin-bottom: var(--size-22);
}

.contact__location {
  color: var(--color-muted);
}

.contact-link {
  margin-top: var(--size-20);
  color: var(--color-terracotta);
  border-bottom: var(--size-1) solid currentColor;
  font-family: var(--font-family-display);
  font-size: var(--contact-link-font-size);
}

.site-footer {
  padding: var(--size-22) 0;
  color: var(--color-footer-text);
  background: var(--color-ink);
  font-size: var(--size-rem-0-7);
  letter-spacing: var(--measure-em-0-08);
  text-transform: uppercase;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--size-20);
}

.site-footer__rights {
  display: block;
  width: var(--container-width);
  margin: var(--size-12) auto 0;
  text-decoration: underline;
  text-underline-offset: var(--size-3);
}

.media-credit {
  color: var(--color-muted);
  font-size: var(--size-rem-0-75);
  margin-top: var(--size-22);
}

.media-credit__link, .artwork-index__link {
  text-decoration: underline;
  text-underline-offset: var(--size-3);
}

.artwork-index {
  padding: 0 0 var(--size-45);
}

.artwork-index__toggle {
  cursor: pointer;
  font-size: var(--size-rem-0-85);
  color: var(--color-sage-dark);
}

.artwork-index__list {
  columns: var(--artwork-index-list-columns);
  padding-left: var(--size-20);
}

.artwork-index__item {
  margin: var(--size-8) 0;
  font-size: var(--size-rem-0-85);
  break-inside: avoid;
}

.artwork-nav {
  display: flex;
  gap: var(--size-22);
  font-size: var(--size-rem-0-75);
}

.artwork {
  padding-block: var(--size-70);
  max-width: var(--size-1080);
}

.artwork__title {
  max-width: var(--size-900);
  font-size: var(--artwork-title-font-size);
}

.artwork__meta, .artwork__caption {
  font-size: var(--size-rem-0-8);
  color: var(--color-muted);
}

.artwork__feature {
  margin: var(--size-32) 0;
}

.artwork__image {
  width: 100%;
  height: auto;
  max-height: var(--viewport-svh-78);
  object-fit: contain;
}

.artwork__caption {
  margin-top: var(--size-12);
  text-align: center;
}

.artwork__description, .translation, .rights__copy {
  max-width: var(--size-760);
}

.translation {
  margin-top: var(--size-30);
  padding-top: var(--size-26);
  border-top: var(--size-1) solid var(--color-border);
}

.translation__title {
  font-size: var(--size-rem-2);
}

.artwork-series {
  margin-block: var(--size-30);
}

.artwork-series__toggle {
  cursor: pointer;
  color: var(--color-sage-dark);
}

.artwork-series__figure {
  margin: var(--size-30) 0;
}

.artwork-series__image, .artwork-series__video {
  width: 100%;
  height: auto;
  max-height: var(--viewport-svh-85);
  object-fit: contain;
}

.artwork-series__caption {
  font-size: var(--size-rem-0-75);
  color: var(--color-muted);
  padding-top: var(--size-10);
}

.rights__copy {
  margin: var(--size-32) auto;
}

.rights__title {
  margin-top: var(--size-36);
  font-size: var(--size-rem-2-3);
}

.rights__link {
  text-decoration: underline;
  text-underline-offset: var(--size-3);
}

@media (max-width: 700px)  {
  .artwork-index__list {
    columns: 1;
  }

  .artwork {
    padding-block: var(--size-40);
  }

  .artwork-nav {
    gap: var(--size-12);
    font-size: var(--size-rem-0-65);
  }

}

/* 11. Lightbox and its elements */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--layer-dialog);
  display: grid;
  place-items: stretch;
  width: var(--viewport-vw-100);
  height: var(--viewport-vh-100);
  height: var(--viewport-svh-100);
  height: var(--viewport-dvh-100);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
}

.lightbox--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-lightbox-backdrop);
  backdrop-filter: blur(var(--size-14));
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--lightbox-panel-grid-template-columns);
  width: 100%;
  height: var(--viewport-vh-100);
  height: var(--viewport-svh-100);
  height: var(--viewport-dvh-100);
  max-height: var(--viewport-vh-100);
  max-height: var(--viewport-svh-100);
  max-height: var(--viewport-dvh-100);
  overflow: hidden;
  color: var(--color-ink);
  background: var(--color-cream);
}

.lightbox__panel--sculpture {
  grid-template-columns: var(--lightbox-panel-sculpture-grid-template-columns);
}

.lightbox__stage {
  position: relative;
  display: grid;
  grid-template-rows: var(--lightbox-stage-grid-template-rows);
  min-width: 0;
  min-height: 0;
  padding: var(--lightbox-stage-padding);
  background: var(--color-lightbox-stage);
}

.lightbox__media {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lightbox__image, .lightbox__video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__image[hidden], .lightbox__video[hidden] {
  display: none !important;
}

.lightbox__caption {
  min-height: var(--measure-em-1-5);
  padding-top: var(--size-10);
  color: var(--color-muted);
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-08);
  text-align: center;
}

.lightbox__step {
  position: absolute;
  top: var(--percent-50);
  display: grid;
  place-items: center;
  width: var(--size-44);
  height: var(--size-44);
  padding: 0;
  border: var(--size-1) solid var(--color-lightbox-button-border);
  border-radius: var(--percent-50);
  color: var(--color-ink);
  background: var(--color-lightbox-step);
  font-size: var(--size-rem-1-8);
  line-height: 1;
  transform: var(--lightbox-step-transform);
  cursor: pointer;
}

.lightbox__step[hidden], .lightbox__page-button[hidden] {
  display: none !important;
}

.lightbox__step--previous {
  left: var(--size-12);
}

.lightbox__step--next {
  right: var(--size-12);
}

.lightbox__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  padding: var(--lightbox-copy-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lightbox__title {
  margin-bottom: var(--size-18);
  font-size: var(--lightbox-title-font-size);
  overflow-wrap: anywhere;
}

.lightbox__description {
  margin-bottom: var(--size-18);
  color: var(--color-muted);
}

.lightbox__meta {
  margin-bottom: var(--size-10);
}

.lightbox__materials {
  color: var(--color-muted);
  font-size: var(--size-rem-0-76);
  overflow-wrap: anywhere;
}

.lightbox__pagination {
  display: flex;
  align-items: center;
  gap: var(--size-14);
  margin-top: var(--size-20);
}

.lightbox__page-button {
  display: grid;
  place-items: center;
  width: var(--size-38);
  height: var(--size-38);
  border: var(--size-1) solid var(--color-border);
  color: var(--color-ink);
  background: transparent;
  font-size: var(--size-rem-1-2);
  cursor: pointer;
}

.lightbox__counter {
  color: var(--color-muted);
  font-size: var(--size-rem-0-72);
  letter-spacing: var(--measure-em-0-12);
}

.lightbox__close {
  position: absolute;
  z-index: var(--artwork-index-list-columns);
  top: var(--size-16);
  right: var(--size-18);
  display: grid;
  place-items: center;
  width: var(--size-42);
  height: var(--size-42);
  padding: 0;
  border: var(--size-1) solid var(--color-lightbox-button-border);
  border-radius: var(--percent-50);
  color: var(--color-ink);
  background: var(--color-lightbox-close);
  font-size: var(--size-rem-1-8);
  line-height: 1;
  cursor: pointer;
}

.hero__copy, .about__grid > *, .workshop__grid > *, .workshop-hero__grid > *, .proposal__grid > *, .proposal-paper, .section-heading--row > * {
  min-width: 0;
}

.contact-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.workshop__links .button {
  text-align: center;
}

.proposal-paper__title {
  font-size: var(--proposal-paper-title-font-size);
  overflow-wrap: anywhere;
}

.workshop-hero, .workshop-contact {
  padding-block: var(--workshop-hero-padding-block);
}

.workshop-hero__title {
  font-size: var(--workshop-hero-title-font-size-2);
  overflow-wrap: anywhere;
}

@media (max-width: 960px)  {
  :root {
    --site-header-height: var(--header-height-tablet);
  }

  .site-header {
    padding: var(--size-rem-1) var(--size-rem-1-5);
  }

  .site-header__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-44);
    min-height: var(--size-44);
  }

  .site-nav {
    position: absolute;
    top: var(--site-nav-top);
    right: var(--size-18);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--site-nav-width);
    padding: var(--size-8);
    background: var(--color-header-scrolled);
    border: var(--size-1) solid var(--color-border);
    box-shadow: var(--shadow-artwork);
  }

  .site-nav--open {
    display: flex;
  }

  .site-nav__link, .site-nav__language-toggle {
    padding: var(--size-13) var(--size-15);
  }

  .site-nav__language-toggle {
    align-self: flex-start;
    margin: var(--size-6) var(--size-8);
  }

  .hero {
    height: auto;
    min-height: var(--hero-height-2);
    grid-template-columns: var(--hero-grid-template-columns-2);
    grid-template-rows: var(--hero-rows-tablet);
    gap: var(--hero-gap);
  }

  .hero__art {
    min-height: 0;
    height: 100%;
    width: var(--hero-art-width);
    margin: 0 auto;
  }

  .hero__image {
    height: 100%;
  }

  .about__grid, .workshop__grid {
    grid-template-columns: var(--workshop-hero-grid-grid-template-columns-2);
    gap: var(--about-grid-gap);
  }

  .about__portrait {
    max-width: var(--size-500);
  }

  .works__grid {
    grid-template-columns: var(--works-grid-grid-template-columns-2);
  }

  .process-gallery {
    grid-template-columns: var(--works-grid-grid-template-columns-2);
    row-gap: var(--size-30);
  }

  .skills__grid {
    grid-template-columns: var(--videos-grid-grid-template-columns);
  }

}

@media (max-width: 700px)  {
  .container {
    width: var(--container-width-2);
  }

  :root {
    --site-header-height: var(--header-height-mobile);
  }

  .site-header {
    padding: var(--size-rem-0-875) var(--size-rem-1-125);
  }

  .hero {
    height: auto;
    min-height: var(--hero-height-2);
    grid-template-rows: var(--hero-rows-mobile);
    gap: var(--size-rem-1);
  }

  h1 {
    margin-bottom: var(--size-rem-0-875);
    font-size: var(--font-size-heading-1-mobile);
  }

  .hero__text, .workshop-hero__text {
    margin-bottom: var(--size-rem-0-75);
    font-size: var(--size-rem-0-9);
  }

  .hero__actions {
    gap: var(--size-rem-0-75);
    margin-top: var(--size-rem-0-875);
  }

  .hero__art, .hero__image {
    min-height: 0;
    height: 100%;
  }

  .hero__label {
    right: var(--size-negative-1);
    bottom: var(--percent-5);
  }

  .intro__grid, .section-heading--row {
    grid-template-columns: var(--hero-grid-template-columns-2);
    display: grid;
    gap: var(--size-20);
  }

  .about {
    min-height: var(--hero-height-2);
    padding-block: 0;
  }

  .works, .videos {
    padding-top: var(--size-rem-5-5);
    padding-bottom: var(--size-rem-5-5);
  }

  .about__image {
    height: var(--about-image-height-mobile);
  }

  .credentials__item, .detail-list__item {
    grid-template-columns: var(--credentials-item-grid-template-columns-2);
    gap: var(--size-12);
  }

  .works__grid {
    grid-template-columns: var(--videos-grid-grid-template-columns);
    gap: var(--size-10);
  }

  .work-card, .work-card__image {
    min-height: var(--size-220);
  }

  .work-card--wide, .work-card--featured {
    grid-column: var(--work-card-wide-grid-column);
  }

  .work-card__info {
    left: var(--size-12);
    right: var(--size-12);
    bottom: var(--size-12);
  }

  .work-card__title {
    font-size: var(--size-rem-1-05);
  }

  .process, .workshop {
    padding: var(--size-88) 0;
  }

  .process-gallery {
    grid-template-columns: var(--videos-grid-grid-template-columns);
    gap: var(--size-18) var(--size-10);
  }

  .skills__inner {
    padding-top: var(--size-88);
    padding-bottom: var(--size-88);
  }

  .skills__grid {
    grid-template-columns: var(--hero-grid-template-columns-2);
    gap: var(--size-8);
  }

  .skills__item {
    padding: var(--size-18) var(--size-8);
  }

  .skills__number {
    margin-bottom: var(--size-12);
  }

  .process-card__image {
    height: var(--size-190);
  }

  .videos__grid {
    grid-template-columns: var(--hero-grid-template-columns-2);
  }

  .contact {
    padding-block: var(--contact-padding-block);
  }

  .workshop-hero__title {
    font-size: var(--workshop-hero-title-font-size-3);
  }

  .workshop-contact {
    padding-block: var(--size-rem-4);
  }

  .proposal-week {
    grid-template-columns: var(--proposal-week-grid-template-columns-2);
    gap: var(--size-rem-0-75);
  }

  .site-footer__inner {
    flex-direction: column;
    gap: var(--size-7);
  }

  .lightbox__panel, .lightbox__panel--sculpture {
    grid-template-columns: var(--workshop-hero-grid-grid-template-columns-2);
    grid-template-rows: var(--lightbox-panel-sculpture-grid-template-columns);
  }

  .lightbox__stage {
    padding: var(--size-52) var(--size-10) var(--size-4);
  }

  .lightbox__step {
    width: var(--size-36);
    height: var(--size-36);
    font-size: var(--size-rem-1-5);
  }

  .lightbox__step--previous {
    left: var(--size-8);
  }

  .lightbox__step--next {
    right: var(--size-8);
  }

  .lightbox__caption {
    padding-top: var(--size-6);
    font-size: var(--size-rem-0-62);
  }

  .lightbox__copy {
    padding: var(--size-8) var(--size-20) var(--size-14);
  }

  .lightbox__title {
    margin-bottom: var(--size-8);
    font-size: var(--lightbox-title-font-size-2);
  }

  .lightbox__description {
    margin-bottom: var(--size-8);
    font-size: var(--size-rem-0-82);
    line-height: var(--lightbox-description-line-height);
  }

  .lightbox__meta {
    margin-bottom: var(--size-5);
    font-size: var(--size-rem-0-6);
  }

  .lightbox__materials {
    margin-bottom: 0;
    font-size: var(--size-rem-0-68);
  }

  .lightbox__pagination {
    gap: var(--size-10);
    margin-top: var(--size-8);
  }

  .lightbox__page-button {
    width: var(--size-32);
    height: var(--size-32);
  }

  .lightbox__close {
    top: var(--size-8);
    right: var(--size-8);
    width: var(--size-38);
    height: var(--size-38);
  }

}

@media (max-width: 480px)  {
  .container {
    width: var(--container-width-3);
  }

  .site-header {
    padding-inline: var(--size-rem-1);
  }

  .brand {
    font-size: var(--size-rem-1-8);
  }

  .hero {
    grid-template-rows: var(--hero-rows-compact);
  }

  h1 {
    font-size: var(--font-size-heading-1-compact);
  }

  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero__art {
    width: 100%;
  }

  .hero__label {
    min-width: 0;
    max-width: var(--percent-85);
    padding: var(--size-rem-0-75) var(--size-rem-1);
  }

  .hero__art-title {
    font-size: var(--size-rem-1);
  }

  .intro {
    padding-block: var(--size-rem-3);
  }

  .section-heading__title, h2 {
    font-size: var(--section-heading-title-font-size);
  }

  .section-heading {
    margin-bottom: var(--size-rem-2);
  }

  .about__copy .section-heading {
    margin-bottom: var(--size-rem-1);
  }

  .about__portrait {
    padding: var(--size-rem-0-75) var(--size-rem-0-75) 0 0;
  }

  .about__image {
    height: var(--about-image-height-compact);
  }

  .work-filter {
    gap: var(--size-rem-0-5);
    margin: 0 0 var(--size-rem-1-5);
  }

  .work-filter__button {
    padding: var(--size-rem-0-6) var(--size-rem-0-7);
    font-size: var(--size-rem-0-66);
  }

  .work-card, .work-card__image {
    min-height: var(--size-rem-11-5);
  }

  .work-card--framed .work-card__image {
    min-height: var(--size-rem-10);
  }

  .work-card__info {
    left: var(--size-rem-0-65);
    right: var(--size-rem-0-65);
    bottom: var(--size-rem-0-65);
  }

  .work-card__title {
    font-size: var(--size-rem-0-95);
  }

  .skills__inner {
    padding-block: var(--size-rem-4);
  }

  .skills__item {
    padding-inline: var(--size-rem-0-5);
  }

  .video-card__copy {
    padding: var(--size-rem-1-25);
  }

  .workshop {
    padding-block: var(--size-rem-4);
  }

  .workshop__lead {
    font-size: var(--size-rem-1-4);
  }

  .detail-list__item {
    grid-template-columns: var(--workshop-hero-grid-grid-template-columns-2);
    gap: var(--size-rem-0-5);
  }

  .workshop__links {
    align-items: stretch;
    flex-direction: column;
  }

  .workshop__links .button {
    width: 100%;
  }

  .proposal-paper {
    padding: var(--size-rem-1-25);
  }

  .proposal-paper__title {
    font-size: var(--proposal-paper-title-font-size-2);
  }

  .proposal-week {
    grid-template-columns: var(--proposal-week-grid-template-columns-3);
    gap: var(--size-rem-0-5);
    padding-block: var(--size-rem-0-875);
  }

  .proposal-week__description {
    font-size: var(--size-rem-1);
  }

  .contact-link {
    font-size: var(--contact-link-font-size-2);
  }

  .site-footer__inner {
    gap: var(--size-rem-0-5);
  }

  .lightbox__copy {
    padding-inline: var(--size-rem-1);
  }

}

@media (max-height: 620px) and (min-width: 701px)  {
  .hero {
    min-height: 0;
  }

  h1 {
    font-size: var(--font-size-heading-1-short);
  }

  .hero__art {
    transform: none;
  }

  .hero__image {
    max-height: var(--hero-image-max-height);
  }

  .about {
    padding-block: var(--size-rem-1);
  }

  .about__image {
    height: var(--about-image-height-short);
  }

}

/* This modifier follows responsive padding so the timeline stays flush. */
.proposal--flush-top {
  padding-top: 0;
}